You’d use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it’d push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse. If you wanted the element to have no effect on the surrounding elements, you’d use … Read more
The default value for left is auto, so just set it to that and you will “reset” it. .elem { left: auto; } Make sure that the above comes after the original CSS file.
You probably can’t. Here’s something that comes close. You won’t get content to flow around it if there’s space below. http://jsfiddle.net/ThnLk/1289 .stuck { position: fixed; top: 10px; left: 10px; bottom: 10px; width: 180px; overflow-y: scroll; } You can do a percentage height as well: http://jsfiddle.net/ThnLk/1287/ .stuck { max-height: 100%; }
You’re looking for position: fixed. From MDN: Fixed positioning is similar to absolute positioning, with the exception that the element’s containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. Notice it doesn’t work when… (…) one of its ancestors … Read more
I had this problem in my application. Here’s how I’m working around it: input.on(‘focus’, function(){ header.css({position:’absolute’}); }); input.on(‘blur’, function(){ header.css({position:’fixed’}); }); I’m just scrolling to the top and positioning it there, so the iOS user doesn’t notice anything odd going on. Wrap this in some user agent detection so other users don’t get this behavior.
left:auto; This will default the left back to the browser default. So if you have your Markup/CSS as: <div class=”myClass”></div> .myClass { position:absolute; left:0; } When setting RTL, you could change to: <div class=”myClass rtl”></div> .myClass { position:absolute; left:0; } .myClass.rtl { left:auto; right:0; }
This is because the transform creates a new local coordinate system, as per W3C spec: In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. This means that fixed … Read more
A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to … Read more
To set the position relative to the parent you need to set the position:relative of parent and position:absolute of the element $(“#mydiv”).parent().css({position: ‘relative’}); $(“#mydiv”).css({top: 200, left: 200, position:’absolute’}); This works because position: absolute; positions relatively to the closest positioned parent (i.e., the closest parent with any position property other than the default static).
Koen’s answer doesn’t exactly center the element. The proper way is to use CSS3 transform property, although it’s not supported in some old browsers. We don’t even need to set a fixed or relative width. .centered { position: fixed; left: 50%; transform: translate(-50%, 0); } .almost-centered { background-color: #eee; position: fixed; width: 40%; text-align: center; … Read more