This crimson colored box is: display:block;
position:relative;
width:90%;
height:300px;
background-color:crimson;
position:absolute;
background-color:green;
right:0;
bottom:0;
bottom:0; left:0;
top:0; right:0;
This crimson colored box is: display:block;
position:relative;
width:90%;
height:300px;
background-color:crimson;
position:absolute;
background-color:green;
right:0;
bottom:0;
bottom:0; left:0;
top:0; right:0;
As my comments hint at above, the critial bit is the block you want to position must be absolutely positioned within either a relative or absolutely positioned element.
A position:fixed element will be taken out of the normal flow and it’s position is always relative to the viewport, unlike position:absolute that is relative to its (positioned) parent container. This is fine if your page is not in a centered column, but for many websites, you’ll find the fixed content is not where you want it. The code below gets around this limitation.
<div id="circleBottom">
<div></div>
</div>
#circleBottom {
top:200px;
left:54px;
position:absolute;
}
#circleBottom div {
position:fixed;
background-image:url(../images/circleBottom.png);
background-repeat:no-repeat;
width:259px;
height:78px;
}
You’ll notice that we are first positioning the object with an absolute container, which then holds the fixed element. The key here, is to NOT specify the position (left, top, etc.) on the fixed element, but rather on the absolutely positioned element.
If you use background-attachment: fixed; to prevent an element’s background image from scrolling, you may see severe jerky scrolling in the browser. iOS just ignores it because the performance is so poor. The solution is to do a position:fixed on an element and set its z-index so it looks like a background image. Also, will-change: transform; tells the browser to paint that element on its own layer. The details are described in https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
.what-we-do-cards {
@include clearfix;
border-top: 10px solid rgba(255, 255, 255, .46);
color: $white;
padding-bottom: 4em;
overflow: hidden; // added for pseudo-element
position: relative; // added for pseudo-element
// Fixed-position background image
&::before {
content: ' ';
position: fixed; // instead of background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; // creates a new paint layer
z-index: -1;
}
}
Note: Do not confuse Stacking context with Block Formatting Context.
When positioned elements overlapping each other you can specify which which one is on top (or bottom, or anywhere in between) via the CSS z-index property. Generally, those items with a higher z-index value are shown on top of those with a lower value. However, there are a few poorly understood rules that are documented well in a Philip Walton post.