css “left” not working
You need to set position to absolute or relative: #inner { width: 400px; height: 300px; background-color: #090; position: absolute; left: 50%; }
positioning
Position an element relative to its container
You are right that CSS positioning is the way to go. Here’s a quick run down: position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). … Read more
jQuery: Difference between position() and offset()
Whether they’re the same depends on context. position returns a {left: x, top: y} object relative to the offset parent offset returns a {left: x, top: y} object relative to the document. Obviously, if the document is the offset parent, which is often the case, these will be identical. The offset parent is “the closest … Read more
CSS transition effect makes image blurry / moves image 1px, in Chrome?
2020 update If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property. For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property. Original answer Try this in your CSS: .your-class-name { /* … … Read more
Stopping fixed position scrolling at a certain point?
Do you mean sort of like this? http://jsfiddle.net/b43hj/ $(window).scroll(function(){ $(“#theFixed”).css(“top”, Math.max(0, 250 – $(this).scrollTop())); }); $(window).scroll(function(){ $(“#theFixed”).css(“top”, Math.max(0, 100 – $(this).scrollTop())); }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <div id=”theFixed” style=”position:fixed;top:100px;background-color:red”>SOMETHING</div> <!– random filler to allow for scrolling –> STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF … Read more
Positions fixed doesn’t work when using -webkit-transform
The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
Make div stay at bottom of page’s content all the time even when there are scrollbars
This is precisely what position: fixed was designed for: #footer { position: fixed; bottom: 0; width: 100%; } Here’s the fiddle: http://jsfiddle.net/uw8f9/
How can I make a div stick to the top of the screen once it’s been scrolled to?
You could use simply css, positioning your element as fixed: .fixedElement { background-color: #c0c0c0; position:fixed; top:0; width:100%; z-index:100; } Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero. You can detect the … Read more
How to Create Grid/Tile View? [duplicate]
This type of layout is called Masonry layout. Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements. jQuery Masonry is one of jQuery plugin to create masonry layout. Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since … Read more