We Keep Coding

Position relative div overlaps position fixed div [duplicate]

So I have this markup and inside it there is <div class="mask"></div> which sets the blue overlay ontop of the image.
If I don't make the .container position:relative, the title text gets hidden behind the blue layer... Almost as if it's usage is mimicking z-index
Why is this the case?
Pen: https://codepen.io/anon/pen/OBbbZB
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>

You need to refer to the specification and more precisely the painting order to understand when each layer is painted.
Without position:relative your element is not positioned and will be painted at the step (4):
For all its in-flow, non-positioned, block-level descendants in tree
order: If the element is a block, list-item, or other block
equivalent:
Then we paint the positioned elements (including the .mask) at the step (8)
All positioned, opacity or transform descendants, in tree order that fall into the following categories
Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.
If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative; /* you can remove this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container">
<h1>Hello World</h1>
</div>
<div class="mask"></div>
</section>
If we check the step (8) it also said opacity or transform which means that if you also change the opacity of the container or add a transform, the order will change too.
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
transform:translate(0); /*added this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
It's also trivial to notice that if you add z-index (either negative or positive) you will also affect the painting order and in this case the tree order will have no effect.
Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order
....
Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.
We paint the element with negative z-index at (3) and the positive ones at (9) and between those steps we have all the cases where z-index is not involved like described initially.

This is a fascinating question. It appears that when the .mask div is made absolute and taken out of the document flow, it's the positions that are affected, but the stacking order of the elements is still in place. So an element placed before the absolute div appears under the div, and an element placed after the absolute div is stacked after.
This isn't really an answer, I just wanted to demo what I looked at:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container0 {
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container0">
<h1>Another Hello World</h1>
</div>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>

Image not scaling to full width of div element

I have a div element and I want my image within it to scale to the full width of the parent however for some reason its not taking up the full width. I could use object-fit: cover; but I don't want to crop the image I want it to fill up the space of the parent. Id also like to scale it so it remains a square the whole time so it always scales as an equal square. I am a little confused as to why its not taking up the parents container. It seems to be wanting to keep its aspect ratio but I want it to stretch to the parent container both via its height and width properties.
html:
import React from 'react';
const ThreeGridTeaser = (props) => {
return (
<div className="specific-offer-container mt-0">
<div className="three-grid-teaser-wrapper">
<div className="three-grid-teaser-container">
{props.gridData.map((item, index) => (
<div key={index} className="three-grid-teaser-block">
<div className="three-grid-image-container hidden">
<img src={item.image}
/>
</div>
<div className="product-text-container hidden">
<ul>
<li className="product-title">{item.title}</li>
<li className="product-description">{item.description}</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
)
}
export default ThreeGridTeaser;
SASS:
.three-grid-teaser-wrapper {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.three-grid-teaser-container {
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
display: flex;
grid-gap: 20px;
gap: 20px;
#media (max-width: 1199.98px) {
gap: 25px;
}
#media (max-width: 767.98px) {
width: 100%;
}
}
.three-grid-teaser-block {
display: flex;
width: 32%;
height: fit-content;
#media (max-width: 1199.98px) {
width: 48%;
}
#media (max-width: 767.98px) {
width:47%;
}
justify-content: center;
flex-direction: column;
}
.hover-text-underline {
text-decoration: underline;
text-underline-position: under;
}
.three-grid-image-container {
height: 300px;
#media (max-width: 1199.98px) {
height: 350px;
}
#media (max-width: 767.98px) {
height: 180px;
}
width: 100%;
max-width: 100%;
img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
}
.product-text-container {
ul {
margin-top: 10px;
padding: 0;
li:last-child {
padding-top: 5px;
}
li {
list-style: none;
}
}
}
.product-title {
font-family: $terminaDemi;
font-size: 12px;
#media (max-width: 767.98px) {
font-size: 8px;
}
}
.product-description {
font-family: $Montserrat;
font-size: 18px;
#media (max-width: 767.98px) {
font-size: 12px;
}
}

This is because the image has reached its maximum height in relation to the div. I mean, an image 300px wide and 400px high inside a 400px square div, in this case if you put a width of 100% in the image, the maximum that it will reach in its width is 300px, in the case of you don't want to resize it.
Demonstração
Update
'object-fit: contain' makes the image fit in the space it has proportionally available, if you want it to maintain its proportion and fill the entire space, use the 'object-fit: cover'
look at this
https://jsfiddle.net/gxnvuq6s/8/

have you tried looking at the background-size: cover; style? you can then also position your image with background-position: center center;

CSS flex a content-fit image with a title sibling of unknown height [duplicate]

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I'm trying to flex the img and .title elements within a flex-column. When the page is resized the image should grow/shrink while maintaining its aspect ratio and the title text should remain the same height at the bottom of the screen. However, when I reduce the screen height the title text is pushed off the screen.
Also, the height of the .title element may not always be a single line, will not be known prior to rendering.
Code: https://jsfiddle.net/qk4wbfpe/
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container > img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
height: 100%;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>

If you add min-height:0 to .container>img it will give the desired result.
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container>img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
min-height:0;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>

add a wrap to your container to make it flow nicely
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
height: 100%;
and add a flex-basis on your child (img)
.container > img {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 25%;
background-color: blue;
object-fit: contain;
or you can remove the flex-grow, shrink and shorthand it to
flex: 1 1 25%;
is that what you needed?

why div not taking width of 90% of the total width?

Could you please tell me why div not taking a width of 90% of total width? When I write like that
width: 90%;
margin: 0 auto;
it takes the width, but when I write like this it doesn't
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
here is my code
https://codesandbox.io/s/bitter-dawn-o6rx2
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: "90%";
/* // width: 90%;
margin: 0 auto; */
`;
how to center form vertically and horizontally

You are doing everything correct except a single line:
Change this line
width: "90%";
to this one
width: 90%;
So your final CSS will be
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 90%;
margin: 0 auto; */
`;

The CSS of your styled Wrapper component should be like the example below. Notice that in your example you have double quotes around 90% which is an invalid CSS value. It has to be 90% without double quotes since styled components use regular CSS syntax.
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 90%; //<=== here
margin: 0 auto;
`;
and you will need to give your form 100% width if you want it to use 100% of the wrapper
const StyledForm = styled.form`
width: 100%;
`

You need to change width: "90%"; to width: 90%;

.testingWidth{
display:flex;
flex-basis:100%;
width:90%;
max-width:90%;
min-width:90%;
margin:0 auto;
background-color:#CCAACC;
min-height:10vh;
padding:0.125em;
}
<div class="testingWidth">
styling with class.
</div>
<div style="display:flex;flex-basis:100%;width:90%;max-width:90%;min-width:90%;margin:0 auto;background-color:#CCC;min-height:10vh;padding:0.125em;">
styling without class.
<p>Do add flex-basis to your styling and check again.</p>
</div>

Centring video in viewport within a sticky footer layout

I'm using Phillip Walton's 'solved-by-flexbox' sticky footer solution for my site.
In addition to this, I have some video pages on which I want to centre the video embed (video-container) in the viewport (both horizontally and vertically)
Below is everything as it is set-up, and Here's a JSFiddle just for good measure.
.Site {
display: flex;
flex-direction: column;
height: 100vh;
/* 1, 3 */
}
.Site-content {
flex: 1 0 auto;
/* 2 */
padding: var(--space) var(--space) 0;
width: 100vw;
}
.Site-header,
.Site-footer {
flex: none;
/* 2 */
}
.Site-header {
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.video-container {
position: relative;
width: 70vw;
height: calc(70vw * 9 / 16);
margin-left: auto;
margin-right: auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<body class="Site">
<div class="Site-header">This is a header</div>
<div class="Site-content">
<div class="video-container">
<iframe src="https://player.vimeo.com/video/100978843" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="Site-footer">This is the footer</div>
</body>
I've seen a few different options, but most of them rely on knowing the exact size of the div or object to be centred.
For example, this option:
.video-container
{
width: 70vw;
height: calc(70vw * 9 / 16);
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
}
Doesn't work, my video-container element still sits at the top of the page.
I've seen another code example which uses Flexbox to centre:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
but this a no-go for me as it interferes with not only my sticky footer set-up but also the rest of the site content (for obvious reasons).
Is there another way to do this?
edit: I'm not sure why I'm receiving down votes. I've tried to explain the scenario with steps I have taken, and I've now provided full and complete code in both a JS Fiddle and a Stack Snippet. If there is anything else or my question is not clear then please, by all means let me know and I can edit the question.

SO36651747
Centring video in viewport within a sticky footer layout
Changed every style except the iframe. Got rid of the CSS variables (they had no ::root so they were useless). Made .Site-content a flex container because flex containers only affect their children. The elements you wanted to center were the grand-children of .Site, therefore it could not control the centering of the video-container.
Changed the style of the video container so that it's height and width maintains a 9:16 aspect ratio.
See references below.
Changes are marked with 🖉
The red borders are there to show the distance between the header/footer/video.
PLUNKER
README.md
.Site {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden; 🖉
align-items: center; 🖉
align-content: center; 🖉
}
.Site-content {
flex: 1 0 auto;
width: 100vw;
display: flex; 🖉
flex-flow: column nowrap; 🖉
justify-content: center; 🖉
align-items: center; 🖉
}
.Site-header,
.Site-footer {
flex: none;
position: absolute;
z-index: 600;
height: 10vh; 🖉
width: 100vw; 🖉
}
.Site-header {
top: 0;
border-bottom: 1px solid red; 🖉
}
.Site-footer {
bottom: 0; 🖉
border-top: 1px solid red; 🖉
}
.video-container {
position: relative;
width: 100%; 🖉
height: 0; 🖉
padding-bottom: 56.25%; 🖉
margin-left: auto;
margin-right: auto;
}
References:
Flexbox - align-items
Responsive Video