Overlapping of Sections/Div
Question
Hello guys I made menu using flexbox and defined hero image in CSS everything working fine, but when I want add another section under image using flexbox , It show's over that first one. I need to show it under first section(as default behaviors is). I tried to define positions, but I made so many changes there and now I'm confused so I need your help to find right way.
@import url('https://fonts.googleapis.com/css?family=Work+Sans:600&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Kalam:700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } li,a { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; color: white; text-decoration: none; }.logo { font-family: "Work Sans", sans-serif; color: aliceblue; } header { display: flex; justify-content: space-between; padding: 30px 10%; align-items: center; width: 100%; position: relative; }.hero{ background-image: linear-gradient(to bottom, rgba(0,0,0, 0.52), rgba(0,0,0, 0.5)), url('https://cdn.pixabay.com/photo/2018/03/31/19/29/schnitzel-3279045_960_720.jpg'); height: 100%; background-size: cover; width: 100%; position: absolute; }.text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } h1.title { color: aliceblue; font-family: "Kalam",sans-serif; font-weight: 700; font-size: 5rem; } h3.podnadpis { color: aliceblue; font-family: "Montserrat", sans-serif; font-weight: 300; } button { background: none; border: 2px solid; font: inherit; line-height: 1; margin: 1em; padding: 1em 2em; cursor: pointer; font-family: "Montserrat", sans-serif; } button { color: var(--color); transition: 0.25s; } button:hover, button:focus { border-color: var(--hover); color: #000; background-color: #e5ff60; }.raise:hover, .raise:focus { box-shadow: 0 0.5em 0.5em -0.4em #e5ff60; -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); }.raise { --color: #ffa260; --hover: #e5ff60; } li { list-style: none; display: inline-block; padding: 0 20px; } li a { transition: all 0.3 ease 0s; } li a:hover { color: green; } section.about { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; position: relative; flex: 1; flex-direction: row; padding: 30px 10%; } p { color: #000; }.divider { width: 1px; background-color: black; height: 100px; }.left { width: 45%; height: auto; }.right { width: 45%; height: auto; padding-left: 20px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Restaurant</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="hero"> <div class="text"> <h1 class="title">Lorem ipsum</h1> <h3 class="podnadpis">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> <button class="raise">Lorem ipsum</button> </div> </div> <header> <div class="logo"><a href="#"><h1>Restaurant</h1></a></div> <nav> <ul class="nav__link"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section class="about"> <div class="left"></div> <div class="divider"></div> <div class="right"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text evesince the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </section> </div> </body> </html>
2 answers
solution1
2 ACCPTED 2019-10-08 11:06:41
For hero class, remove absolute position and make height 100vh
And also move header module inside.hero Can check this pen( https://codepen.io/abhii/pen/GRRgwYv )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Restaurant</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<header>
<div class="logo">
<a href="#">
<h1>Restaurant</h1>
</a>
</div>
<nav>
<ul class="nav__link">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="text">
<h1 class="title">Lorem ipsum</h1>
<h3 class="podnadpis">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
<button class="raise">Lorem ipsum</button>
</div>
</div>
<section class="about">
<div class="left"></div>
<div class="divider"></div>
<div class="right">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text evesince the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</section>
</body>
@import url("https://fonts.googleapis.com/css?family=Work+Sans:600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Kalam:700&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
li,
a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
text-decoration: none;
}
.logo {
font-family: "Work Sans", sans-serif;
color: aliceblue;
}
header {
display: flex;
justify-content: space-between;
padding: 30px 10%;
align-items: center;
width: 100%;
position: relative;
}
.hero {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.52),
rgba(0, 0, 0, 0.5)
),
url("https://cdn.pixabay.com/photo/2018/03/31/19/29/schnitzel-3279045_960_720.jpg");
// height: 100%;
background-size: cover;
width: 100%;
// position: absolute;
height: 100vh;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
h1.title {
color: aliceblue;
font-family: "Kalam", sans-serif;
font-weight: 700;
font-size: 5rem;
}
h3.podnadpis {
color: aliceblue;
font-family: "Montserrat", sans-serif;
font-weight: 300;
}
button {
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 1em;
padding: 1em 2em;
cursor: pointer;
font-family: "Montserrat", sans-serif;
}
button {
color: var(--color);
transition: 0.25s;
}
button:hover,
button:focus {
border-color: var(--hover);
color: #000;
background-color: #e5ff60;
}
.raise:hover,
.raise:focus {
box-shadow: 0 0.5em 0.5em -0.4em #e5ff60;
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.raise {
--color: #ffa260;
--hover: #e5ff60;
}
li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
li a {
transition: all 0.3 ease 0s;
}
li a:hover {
color: green;
}
section.about {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
position: relative;
flex: 1;
flex-direction: row;
padding: 30px 10%;
}
p {
color: #000;
}
.divider {
width: 1px;
background-color: black;
height: 100px;
}
.left {
width: 45%;
height: auto;
}
.right {
width: 45%;
height: auto;
padding-left: 20px;
}
solution2
0 2019-10-08 14:14:58
I would suggest that you make use of flexbox image grid As so:
.row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */.column { flex: 25%; max-width: 25%; padding: 0 4px; }.column img { margin-top: 8px; vertical-align: middle; width: 100%; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) {.column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {.column { flex: 100%; max-width: 100%; } }
<div class="row"> <div class="column"> <img src="example1.jpg"> <img src="example2.jpg"> <img src="example3.jpg"> </div>x <div class="column"> <img src="example4.jpg"> <img src="example5.jpg"> <img src="example6.jpg"> </div> <div class="column"> <img src="example7.jpg"> <img src="example8.jpg"> <img src="example9.jpg"> </div> <div class="column"> <img src="example 10.jpg"> <img src="example11.jpg"> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS div sections overlapping
DIV Sections Overlapping One Another
My div sections are overlapping when changing browser's height
Overlapping Div Sections, can't figure out why
Sections overlapping Bootstrap 4
Overlapping sections html
Sections overlapping with Bootstrap 3
CSS overlapping sections
Overlapping sections with each other
Sections are Overlapping In HTML
Related Tags