Questions tagged [positioning]

This tag is ambiguous. DO NOT USE THIS TAG. - Please use (or create, if appropriate) other, more specific tags.

This tag is ambiguous. Please use (or create, if appropriate) other, more specific tags.

Positioning often refers to the process of placing viewable elements. Most questions tagged with 'positioning' involve cascading stylesheets (CSS) problems, but some refer to other user interface frameworks such as iOS, Android, windows development, flash and more.

2701 questions
421
votes
24 answers

How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.
evanr
  • 4,396
  • 3
  • 20
  • 16
351
votes
17 answers

How do I center a SVG in a div?

I have a SVG that I am trying to center in a div. The div has a width of 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if the left margin is 0 (default). Does Anyone know…
Don P
  • 60,113
  • 114
  • 300
  • 432
330
votes
12 answers

Make div stay at bottom of page's content all the time even when there are scrollbars

I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow. I have a div…
H Bellamy
  • 22,405
  • 23
  • 76
  • 114
254
votes
6 answers

Relatively position an element without it taking up space in document flow

How can I relatively position an element, and have it not take up space in the document flow?
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
199
votes
5 answers

Position an element relative to its container

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have a grid lines to mark an…
Craig Walker
  • 49,871
  • 54
  • 152
  • 212
185
votes
3 answers

jQuery: Difference between position() and offset()

What is the difference between position() and offset()? I tried to do the following in a click event: console.info($(this).position(), $(this).offset()); And they seem to return exactly the same... (The clicked element is within a table cell in a…
Svish
  • 152,914
  • 173
  • 462
  • 620
171
votes
14 answers

CSS transition effect makes image blurry / moves image 1px, in Chrome?

I have some CSS that on hover, a CSS transition effect will moves a div. The problem, as you can see in the example, is that the translate transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly…
Lewis
  • 1,725
  • 2
  • 11
  • 7
162
votes
7 answers

In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

.offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent? I found that .position() method get only "top,left" values relative to the…
Max
  • 4,965
  • 17
  • 49
  • 64
140
votes
8 answers

How to Create Grid/Tile View?

For example, I have some class .article, and I want to view this class as grid view. So I applied this style: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } That style will make the .article look…
Ariona Rian
  • 9,153
  • 3
  • 24
  • 36
107
votes
7 answers

Difference between static and relative positioning

In CSS, what is the difference between static (default) positioning and relative positioning?
jrdioko
  • 32,230
  • 28
  • 81
  • 120
106
votes
13 answers

Stopping fixed position scrolling at a certain point?

I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250px from the top of the page, is this possible? Any…
Louise McComiskey
  • 1,855
  • 4
  • 19
  • 20
82
votes
10 answers

CSS position:fixed inside a positioned element

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so when the user scrolls the div it won't scroll…
Calmarius
  • 18,570
  • 18
  • 110
  • 157
81
votes
10 answers

CSS: fixed to bottom and centered

I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can't just center it via margin-left: xxpx; margin-right: xxpx; The problem is that for some reason this doesn't…
CamelCamelCamel
  • 5,200
  • 8
  • 61
  • 93
75
votes
6 answers

Sizing and positioning elements based on window width

I have kind of a weird question. On my page I have a main image of a planet in some heavy duty nebula. I have it set up so the min width is 1000px and max is 1500px. I have the sides fading out and this looks great with larger screens. What I'd…
loriensleafs
  • 2,205
  • 9
  • 37
  • 71
67
votes
7 answers

Position by center point, rather than top-left point

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's say it's 200px*/ position:…
kaboom1
  • 809
  • 2
  • 8
  • 9
1
2 3
99 100