How do I make a div roll on top of another div while scrolling? I tried using z-index but doesn't seem to work the code as I want. Please look at the images below.
I want the green div to be on top of the "App Name Here" div (to cover it), and not below it. How should I do that? Here is the code I'm using
HTML
<div class="header">
<div>
<h1><span style="color: rgb(133, 13, 13);">App Name </span><span style="color: rgb(39, 161, 15);">Here</span></h1>
</div>
</div>
<div class="box1">
<header>
<h2 style="text-align: center;margin-bottom:15px;font-family:cursive;">Info.</h2>
</header>
<p>
Lorem Ipsum is simply .....
</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body{
background-image: url("social_media_background_small.jpg");
background-attachment: fixed;
background-size: cover;
}
.box1 {
height: 90vh;
background-color: aquamarine;
z-index: 99;
border-radius: 12px;
padding: 2rem;
}
.box1 p{
text-align: justify;
}
.header {
background-color: rgb(27, 21, 21);
opacity: 0.75;
height: 60vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
}
.header div{
z-index: 0;
}
.header div h1 {
font-size: 3rem;
z-index: 0;
}
You need to position the box1 element:
.box1 {
position: relative;
height: 90vh;
background-color: aquamarine;
z-index: 99;
border-radius: 12px;
padding: 2rem;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Related
I am trying to knockout my text so that the video is showing through, however I have boxes so when ever I hover over "box1", "box2" goes white and has an opacity of 0.5, and they seem to be getting in the way. I want the boxes to do the sam as they are now, just with see through text on top.
Here is my HTML and CSS
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<video autoplay muted loop
src="car.mp4"
style="width: 100%; height: 100%; padding: 0; margin: 0;">
</video>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 104vh;
position: absolute;
max-width: 100%;
padding: 0%;
}
.box1 {
position: absolute;
width: 814px;
height: 50px;
background: transparent;
text-align: center;
z-index: 1;
font-size: 86px;
}
.box2 {
position: absolute;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
text-align: center;
}
.box1:hover + .box2 {
background-color: white;
opacity: 0.5;
}
I am working on a layout where I have two movie posters besides each other. There are two things that I can't get to work at the moment:
The overlaying text box should have the width of the poster and be located at the bottom of it (the bottom line of the text box should be at the same position as the bottom line of the poster).
The images should automatically resize so that the posters are always fully on the screen. At the moment, the bottom of the posters is not visible if the window becomes too small. They should also always keep their original aspect ratio (currently also not given).
The posters and their respective texts should always be centered on the screen.
This is how far I've got, however trying to solve any of the mentioned problems has created new ones so far.
JSFiddle
.layout {
width: 100%;
display: flex;
gap: 16px;
}
.film {
flex-grow: 1;
}
.poster {
width: 100%;
height: 100%;
max-width: 500px;
max-height: 700px;
}
.overlay {
color: white;
text-align: center;
font-size: 20px;
font-family: sans-serif;
background-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0, 0.5);
padding: 20px;
position: absolute;
bottom: 0;
width: 100%;
}
.remove {
text-align: center;
padding: 10px;
background-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0, 0.5);
color: white;
}
<section class="layout">
<div class="grow1">
<img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
<div class="overlay">Title<br><span class="year">2014</span></div>
<div class="remove">
Remove Film
</div>
</div>
<div class="grow1">
<img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
<div class="overlay">Title<br><span class="year">2015</span></div>
<div class="remove">
Remove Film
</div>
</div>
</section>
Desired result (roughly):
Here you are:
* {
box-sizing: border-box
}
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0
}
.layout {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
gap: 16px;
padding: 16px;
}
.grow1 {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
max-width: 500px;
max-height: 700px;
position: relative;
}
.poster {
height: 100%;
align-self: center;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 0;
color: white;
text-align: center;
font-size: 20px;
font-family: sans-serif;
background-color: rgba(0, 0, 0, .5);
padding: 20px 20px 10px;
}
.remove {
font-size: initial;
font-family: serif;
padding: 20px 0 0;
}
<section class="layout">
<div class="grow1">
<img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
<div class="overlay">Title<br><span class="year">2014</span>
<div class="remove">
Remove Film
</div>
</div>
</div>
<div class="grow1">
<img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
<div class="overlay">Title<br><span class="year">2015</span>
<div class="remove">
Remove Film
</div>
</div>
</div>
</section>
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
I want to create a page which is split by a box above a horizontal line and one below the horizontal line. Just above and below the line I want to have a text. I came up with a solution with flex and 4 divs where I adjust the height of each div to around 30%-20%-20%-30%. However when going responsive this sometimes keeps the text crossing the horizontal line. I want to guarantee that the above text stays above and the below text stays below.
Here my solution is - https://codepen.io/tobwun/pen/VwWRGWY
body,
html {
height: 100%;
width: 100%;
}
.m {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
text-align: center;
color: white;
font-weight: bold;
font-size: 2em;
}
.d1 {
background-color: pink;
width: 100%;
height: 30%;
}
.d2 {
background-color: pink;
width: 100%;
height: 20%;
}
.d3 {
background-color: lightblue;
width: 100%;
height: 20%;
}
.d4 {
background-color: lightblue;
width: 100%;
height: 30%;
}
<body>
<div class="m">
<div class="d1">
</div>
<div class="d2">
ABOVE TEXT
</div>
<div class="d3">
</div>
<div class="d4">
BELOW TEXT
</div>
</div>
</body>
I was wondering if it would be possible with two divs and some padding? With the first one the text on the bottom and the second one the text on top.. If this by design is not recommended to be done with flexbox I am also open for another solution.
Thanks for any help!
Why not just use two elements, and use align-items and justify-content to place them as you want ?
body,
html {
height: 100%;
width: 100%;
}
.m {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
color: white;
font-weight: bold;
font-size: 2em;
text-align:center;
}
.top, .bottom{
width: 100%;
height: 50%;
display:flex;
justify-content:center;
}
.top {
background-color: pink;
align-items:flex-end;
padding-bottom:0.5em;
}
.bottom {
background-color: lightblue;
align-items:flex-start;
padding-top:0.5em;
}
<body>
<div class="m">
<div class="top">
ABOVE TEXT
</div>
<div class="bottom">
BELOW TEXT
</div>
</div>
</body>
Easiest way to solve this is to use position: absolute;.
top: 50%; will put the element below the vertical center line.
bottom: 50%; will put the element above the vertical center line.
body {
margin: 0;
min-height: 100vh;
}
.top-text {
position: absolute;
bottom: 50%;
}
.bottom-text {
position: absolute;
top: 50%;
}
.top-text,
.bottom-text {
left: 0;
right: 0;
}
/* for styling purpose only */
body {
background: linear-gradient(darkblue 0% 50%, darkred 50% 100%);
color: white
}
.top-text,
.bottom-text {
text-align: center;
font-size: 2em;
border: 1px solid white;
padding: 5px;
}
<div class="top-text">Top</div>
<div class="bottom-text">Bottom</div>
This question already has answers here:
Understanding z-index stacking order
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
attempting to make a simple layout and have hit a dead end. I am trying to make a page that perfectly fits the screen such that there is no scrolling what-so-ever. Basically, in the included code, I'd like to have the reddish title bar (at the top) display on top of the yellowish container. The height of the yellowish container is set to 100vh so as to span the height of the viewport. In this way, the page will be perfectly sized such that you will never need to scroll.
I think it has to do with the z-index...which I thought I understood up until this point. I've watched videos, read articles, and tried everything I could think of. My last resort is trying my luck online.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
Do this if you want you navbar to always stick at the top.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header {
z-index: 11;
position: fixed;
width:100%
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
Welcome to SO!
Using position relative with z-index solved the issue on header
When you set position: relative on an element then you establish a new
containing block. All positioning inside that block is with respect to
it.
Setting z-index on an element inside that block will only alter its
layer with respect to other elements inside the same block.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header {
z-index: 11;
position: relative;
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
You need to set z-index for header. Ex:
header{
position: relative;
z-index: 9999
}
If you need your header should stick at the top of the screen. add positioning. ex:
header{
position: fixed;
top: 0;
width: 100%;
z-index: 9999
}