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.

2640 questions
328
votes
21 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
  • 3,466
  • 3
  • 17
  • 15
284
votes
13 answers

How do I center an SVG in a div?

I have an SVG that I am trying to center in a div. The div has a width or 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). Anyone know my…
Don P
  • 49,839
  • 95
  • 259
  • 394
283
votes
12 answers

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

CSS Push Div to bottom of page Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow. I have a div with id="footer" and this…
H Bellamy
  • 20,906
  • 22
  • 68
  • 110
208
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
  • 64,966
  • 87
  • 197
  • 254
191
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
  • 44,465
  • 49
  • 146
  • 204
180
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
  • 138,188
  • 158
  • 423
  • 589
163
votes
17 answers

Positions fixed doesn't work when using -webkit-transform

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user. In Firefox it works fine, but in webkit based browsers it's broken. After using the…
iSenne
  • 2,476
  • 5
  • 23
  • 25
161
votes
13 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,625
  • 2
  • 11
  • 7
150
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,469
  • 15
  • 44
  • 61
144
votes
16 answers

How can I fill a div with an image while keeping it proportional?

I found this thread — How do you stretch an image to fill a
while keeping the image's aspect-ratio? — that is not entirely the thing that I want. I have a div with a certain size and an image inside of it. I want to always fill-out the div…
matt
  • 37,699
  • 99
  • 250
  • 390
137
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
  • 8,326
  • 3
  • 19
  • 35
102
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,777
  • 4
  • 18
  • 20
91
votes
9 answers

Difference between static and relative positioning

In CSS, what is the difference between static (default) positioning and relative positioning?
jrdioko
  • 28,317
  • 26
  • 75
  • 116
79
votes
9 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,048
  • 8
  • 57
  • 91
71
votes
8 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
  • 16,155
  • 15
  • 95
  • 134
1
2 3
99 100