If the element must be absolutely positioned (so, margin: 0 auto; is of no use for centering), and scripting is out of the question, you could achieve this with CSS3 transforms. .centered-block { width: 100px; left: 50%; transform: translate(-50%, 0); position: absolute; } See this fiddle for some examples. The important parts: left: 50%; pushes … Read more
Viewport units for CSS 1vw = 1% of viewport width 1vh = 1% of viewport height This way, you don’t have to write many different media queries or javascript. If you prefer JS window.innerWidth; window.innerHeight;
You can use the position:fixed;, but without set left and top. Then you will push it to the right using margin-left, to position it in the right position you wish. Check a demo here: http://jsbin.com/icili5
You should use a sticky footer solution such as this one : * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer’s height */ } .footer, .push { height: 142px; … Read more
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don’t obey left, top, right and bottom rules: Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element’s normal position … Read more
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
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
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).
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
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.