A little popup told me I had a new Twitter follower in my browser. I clicked inspect element to poke around, and of course wasn't surprised that it was a fixed position element, but the CSS surprised me.
#spoonbill-outer {
position: fixed;
right: 0px;
bottom: 0px;
margin: 22px;
z-index: 10;
}
Is there a reason for using margins instead of right:22px, bottom:22px?
Interesting point to consider, I tried it both ways and essentially both approaches lead to the same result.
I would say both approaches are equivalent in the simplest example.
If you look at the CSS specification, the left/right offsets and the left/right margins and the width can be constrained depending on which values are specified or set to auto.
See: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
However, I found it hard to imagine a case in which specifying offsets versus margins would make a difference (there might be an exotic case, but I can't think of it off the top of my head).
body {
margin: 0;
}
.popup {
background-color: yellow;
position: fixed;
right: 0;
bottom: 0;
margin: 40px;
}
.popup-alt {
background-color: lightblue;
position: fixed;
right: 40px;
bottom: 40px;
}
<div class="popup">Yellow Popup Element</div>
<div class="popup-alt">Blue Popup Element</div>
Related
I have a keyboard diagram to indicate to the user that they should be able to press a key to move from one cell of the CSS grid to another. The cells are set to the width and height of the browser. (The keypress does not function yet). Still, when I scroll up and down, the arrow key image remains, but when I scroll right, the right cells of the grid shove the image off the page? (It would also be nice to get rid of the negative margin on the body tag but that seems to be necessary when the image is a sticky element.
body {
margin: 0;
padding: 0;
margin-top: -102px;
}
.nav-legend {
position: sticky;
top: 10px;
padding-left: 10px;
}
https://codepen.io/russellbits/pen/eYjmWyg
Not sure if it gets the desired result, but it seems that position: fixed might be suitable for the use case.
Forked demo with modification: codepen
Example:
body {
margin: 0;
padding: 0;
}
.nav-legend {
position: fixed;
top: 10px;
left: 10px;
z-index: 999;
}
I am quite fresh to LESS. I am not sure where to look in the documentation for this or if it is possible.
I have container one, which has height:auto. it is a content container that will grow.
Can I have a second container that would be like - container2:height = container1:height.
So that the second container will become the same size as the container with height:auto.
This can be done with javascript of course but I am curious is this is something that can be done with LESS.
P.S.:If anyone wants to plug any good LESS tutorials/reading material, I would be happy to see it.
This is not a question about less then more a question about css.
To make a inner divelement to fit the same height form the outer element without knowing (or given height) you can do something like this:
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
margin: 0 auto;
width: 300px;
height: 300px;
position: relative;
}
.inner{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
So you can be shure that the inner DIV has always the exact same sizes like the outer DIV
UPDATE:
When the DIV elements should not overlap each other you can do something like this:
.inner{
position: absolute;
top: 100%;
bottom: -100%;
left: 0;
right: 0;
}
Now the second DIV has exact the same hight and is placed under the first one :)
#height: 100px;
#container1{
height: #height;
}
#container2{
height: #height;
}
#height: 100px; I defined a variable with name is height and value is 100px and I use it in the css underneath
I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).
My goal is when X event fires and the mask come up, to show up the holder element over the mask.
Here is a fiddle showing my problem: JSFIDDLE
Here is my HTML:
<div class="leftpanel">
<div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
<div class="holder">asdasdas</div>
</div>
<div class="mask"></div>
<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>
and here's the CSS:
.mask {
opacity: 0.85;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
background-color: #000;
}
.leftpanel {
width: 250px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: red;
padding: 15px;
}
.holder {
width: 230px;
height: 90px;
background-color: #fff;
z-index: 99999; <<<<<<<<<< This is NOT working!
}
Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.
http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.
I am using transform: skew to create the effect of a down arrow on my banner image using both the :before and :after tags. The result should look like the following:
However, in IE 9-11 there seems to be a rounding issue. At some heights there is one pixel from the background image that shows below the skewed blocks resulting in the following:
In my case, the banner is a percentage of the total height of the window. Here is the some sample code which should be able to reproduce the problem:
HTML
<div id="main">
<div id="banner"></div>
<section>
<h1>...</h1>
<p>...</p>
</section>
</div>
CSS
#banner {
position: relative;
background-color: green;
width: 100%;
height: 75%;
overflow: hidden;
}
#banner:before,
#banner:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
height: 1.5em;
background-color: #FFFFF9;
transform: skew(45deg);
transform-origin: right bottom;
}
#banner:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
}
body {
background-color: #333;
position: absolute;
width: 100%;
height: 100%;
}
#main {
max-width: 40em;
margin: 0 auto;
background-color: #FFFFF9;
position: relative;
height: 100%;
}
section {
padding: 0 1em 5em;
background-color: #FFFFF9;
}
And here a working example.
Yes, seems to be a rounding issue – and I don’t know of anything that one could do to fix this. It’s in the nature of percentage values that they don’t always result in full pixel values – and how rounding is done in those cases is up to the browser vendor, I’m afraid.
I can only offer you a possible workaround (resp. “cover up”) that seems to work – if the layout really is as simple as this, and the main content area has a white background, and no transparency or background-image gets involved there.
Pull the section “up” over the banner by a negative margin of -1px (eliminated top margin of h1 here as well, otherwise it adjoins with the top margin of the section – countered by a padding-top), so that its background simply covers up that little glitch:
section {
padding: 1em 1em 5em;
background-color: #FFFFF9;
position:relative;
margin-top:-1px;
}
section h1:first-child { margin-top:0; }
Well, if you look closely, that makes the corner of triangle look slightly “cut off” (by one pixel) in those situations where the rounding glitch occurs – if you can live with that (and your desired layout allows for it), then take it :-) (And maybe serve it to IE only by some means). If not – then sorry, can’t help you there.
I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.