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;
instead of doing it like that, why not just make the flyout position:fixed, top:0; left:0; once your window has scrolled pass a certain height: jQuery $(window).scroll(function(){ if ($(this).scrollTop() > 135) { $(‘#task_flyout’).addClass(‘fixed’); } else { $(‘#task_flyout’).removeClass(‘fixed’); } }); css .fixed {position:fixed; top:0; left:0;} Example
Using this HTML: <div id=”myElement” style=”position: absolute”>This stays at the top</div> This is the javascript you want to use. It attaches an event to the window’s scroll and moves the element down as far as you’ve scrolled. $(window).scroll(function() { $(‘#myElement’).css(‘top’, $(this).scrollTop() + “px”); }); As pointed out in the comments below, it’s not recommended to … Read more
There are two solutions I can think of quickly off the top of my head. You can either give the #headercontainer element a z-index CSS property… #headercontainer { /* … other CSS … */ z-index: 1000; } … or you can do it the way I think it should be done… #headercontainer { /* … … Read more
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
SVG is inline by default. Add display: block to it and then margin: auto will work as expected.
z-index is relative. See this detailed answer, which I wrote for a similar question. If none of the other elements have a defined z-index, using z-index: 1 will be fine. Model: How is the z-index determined? z-index <div id=A> Auto 1 <div id=B> Auto 1.1 <div id=C style=”z-index:1″></div> Manual 1 <div id=D></div> Auto 1.1.2 </div> … Read more
You need to set position to absolute or relative: #inner { width: 400px; height: 300px; background-color: #090; position: absolute; left: 50%; }
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