How to prevent element absolute position from overlap in css - html

I have a div element to show my blog post, each post have to load an image, a title and one paragraph inside it,
because I want to show title element at bottom of image with a simple background-color then I write the markup like this:
<div class="post">
<div class="thumb">
<img class="image" src="img">
<h3 class="title">title</h3>
</div>
<p class="content">Content</p>
</div>
I put the image and title element inside a div block to place them on each other(title overlap the image) and set thumb position to relative and two child element(image and title) to absolute to achieve the final result, but after that the image and title goes outside of it parent(post element) and overlap the other element above of it in the page.
.post {
.thumb {
position: relative;
.image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
.title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(#000, .7);
color: #fff;
padding: .5rem;
}
}
.content {
}
}
I want to know why the parent element lose it's height block space and overlap on other elements.
I read some of the similar questions but non of them answer this.
I know if I just set the title position to absolute and fixed on the bottom of image keep the space of block, or use css grid's to achieve similar things but I want to find the real reason to this problem and how to prevent it?
The complete sample code is on codepen: https://codepen.io/anon/pen/GaMegN?editors=1100#0
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>

The thumb wont have a height because elements with position: absolute; does not take up relative space in it.
I would suggest to remove the position: absolute; on the image, that would give the thumb width and height, but keep absolute on the title
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
max-width: 100%;
max-height: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
margin: 0;
}
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">title</h3>
</div>
<p class="content">Content</p>
</div>

Absolute positioned elements step out of the regular flow. The parent elements (position: relative) now don't know anything about the size of their child. For them it is just like the child has display: none. I won't affect their own size in any way.
How can you prevent this? There may be many ways.
Don't use absolute on every element: Here I set the .title to relative so that I can control the z-index. I needed the overflow: hidden on .thumb. I added some margins on .title so I can see more of the image
.post .thumb {
position: relative;
/* new */
overflow: hidden;
margin-top: 20px;
}
.post .thumb .image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.post .thumb .title {
display: block;
/* position: absolute; */
/* bottom: 0; */
/* left: 0; */
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
/* new */
position: relative;
z-index: 1;
margin-bottom: 20px;
margin-top: 60px;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/id/990/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>
Or use a background-image instead of an <img> element
.post .thumb {
position: relative;
overflow: hidden;
margin-top: 20px;
background-repeat: no-repeat;
background-size: cover;
background-position: center 40%;
}
.post .thumb .title {
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
position: relative;
z-index: 1;
margin-bottom: 20px;
margin-top: 60px;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb" style="background-image: url(https://picsum.photos/id/990/400/200)">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>

Change the position of the image and the title to relative and just add a top:-100px (or whatever) to your title

When you set any element to absolute they are taken out of normal document flow and thus other elements position themselves as the targeted absolute element does not exist.
*{
box-sizing:border-box;
}
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
width: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
margin:0;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>

Related

Superimpose 2 DIV

I want realise this page
this is my work
the probleme is i can't superimpose the div who contain the text "LUCETTE" under the div who contain the picture
my code html:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.titre span {
text-align: center;
text-transform: uppercase;
font-size: 16rem;
font-weight: bolder;
font-family: 'playfair_displayitalic';
position: absolute;
bottom: 0;
z-index: -1;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied">
<h1 class="titre"> <span>lucette</span> </h1>
</div>
</main>
THANKS .
i'm tryng to superimpose the div who contain the image on top of the div who contain the text "LUCETTE".
but the text "LUCETTE" is on the top of my page .
Try this:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
padding-top: 100px;
height: 100vh;
display: flex;
justify-content: center;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.pied {
font-weight: bolder;
font-family: serif;
position: absolute;
width: 0px;
overflow: visible;
bottom: 35%;
left: 50%;
}
.pied h1 {
position: absolute;
text-align: center;
text-transform: uppercase;
font-size: 16rem;
transform: translate(-50%, 0);
font-family: 'playfair_displayitalic';
top: 0;
left: 50%;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied"><h1>lucette</h1></div>
</main>
Mind the fact that you might need to tweak the bottom attribute of .pied as I did not have that font.
Main issue in your code was that you didn't set position: absolute for the main container of the text. I did some tweaks to ensure that text is also centered etc.
Using absolute position removes items from the normal flow of the page, and can often lead to isolation and z-index mistakes.
I'm attaching a method using a grid layout to superimpose items. Grids are usually easier to debug.
Just to be clear absolute positions can be used, this is just an alternative.
section {
display: grid;
}
.behind {
height: 5rem;
width: 5rem;
background-color: red;
grid-area: 1 / 1;
}
.front {
height: 3rem;
width: 3rem;
background-color: blue;
/* Can also use grid-area */
grid-column: 1;
grid-row: 1;
}
<section>
<div class="behind"></div>
<div class="front"></div>
</section>
enter image description here
Now the result is better but the problem now i want move the bloc center ho contain the picture and the texte in the the middle on the page but i can 't

Padding text with content of grid

I'm using grid layout in CSS and I have a span, with a grid on the bottom.
Each cell of my grid have a centered content and i would like to add padding on left and right to my text for being align with the content of cell in both side.
I would like a full css solution, but i'm not sure if it's possible...
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
<div class="grid-container grid-container--fill">
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
</div>
Here is a jsfiddle if u want to try some stuff :
https://jsfiddle.net/s4Lxwrm5/
Here you go buddy:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: auto;
position: relative;
display: block;
overflow: auto;
background-color: grey;
}
.container-inner {
width: 100%;
max-width: 1248px; /* SET YOUR MAX WIDTH */
height: auto;
margin: 0 auto;
padding: 20px; /* SET YOUR PADDING */
position: relative;
display: block;
overflow: auto;
background-color: orange;
}
.text-container {
width: 100%;
height: auto;
margin: 0 auto 20px auto;
padding-left: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
padding-right: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
position: relative;
text-align: justify;
background-color: red;
}
.supporting-boxes {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, 25%);
background-color: green;
}
.grid-box {
width: 80%; /* LEAVING 10% PADDING */
height: auto;
min-height: 200px;
position: relative;
justify-self: center;
background-color: purple;
}
.box-content {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: pink;
}
<div class="container">
<div class="container-inner">
<div class="text-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="supporting-boxes">
<div class="grid-box">
<div class="box-content">
A
</div>
</div>
<div class="grid-box">
<div class="box-content">
B
</div>
</div>
<div class="grid-box">
<div class="box-content">
C
</div>
</div>
<div class="grid-box">
<div class="box-content">
D
</div>
</div>
</div>
</div>
</div>
This is quite volatile code though, if you're changing the number of boxes and stuff we may need to look for another solution.

How to force the content of the div to display below of the background image in the mobile device?

I have two rows of background image and content. Both are displaying properly on the desktop. I need to display in a single column on the mobile device.
I am confused what should I use on the mobile device.
Please check out the images.
Would you help me out in this?
I am getting the output in the desktop
I need a output in the mobile device
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: relative;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
<div class="example1_bg banner_bg">
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
<div class="example1_bg banner_bg">
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<!--example1_bg-->
You need to change your structure for it so it works well as you desire and you will require media queries as well.
Wrap both the content as siblings instead of parent and child inside a super class (container) as shown.
Initially since they have absolute positioning with respect to container, they'll show as expected.
When the screen is resized use media query as such and change the position to relative. (Setting to relative allows them to have their natural behaviour and not overlap and you can adjust the top,left,bottom,right positioning as required)
#media only screen and (max-width:600px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.inner_padding {
box-sizing: border-box;
padding: 0 20px;
}
.container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
}
.example1_bg {
background-image: url(http://www.creativehdwallpapers.com/uploads/large/background/landscape-nature-background-image.jpg);
}
.banner_bg {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: auto;
min-height: 100%;
background-position: center;
position: absolute;
}
.example_part {
position: absolute;
right: 50px;
top: 11%;
margin-top: auto;
margin-bottom: auto;
}
.note_part {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 470px;
box-sizing: border-box;
padding: 25px;
}
.const_part {
position: absolute;
left: 50px;
top: 15%;
}
.example1_bg .h_title h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 35px;
margin-top: 14px;
font-family: "Walsheim-Regular";
}
.h_title h2:after {
content: '';
border-bottom: 2px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 60px;
padding-top: 10px;
}
.repair_conent_title,
.repair_conent_text {
padding: 0 70px 0 20px;
}
.h_content p {
font-size: 18px;
}
#media only screen and (max-width:700px) {
.banner_bg {
position: relative;
min-height: 300px;
width: 100%;
}
.example_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
.const_part {
position: relative;
width: 100%;
left: 0;
top: 0;
}
}
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="example_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
<div class="container">
<div class="example1_bg banner_bg">
</div>
<!--example1_bg-->
<div class="const_part note_part">
<div class="inner_padding">
<div class="h_title">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>
<div class="h_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn_know_more">
Know more
</div>
</div>
<!--h_content-->
</div>
</div>
<!--example_part-->
</div>
Im not at my pc atm. I'm sure I have code for this. But w3school has good examples in a css3 tag https://www.w3schools.com/css/css3_flexbox.asp
You could wrap them individually in a div. So background and content in their own div. Then same again for the other two. And have both background and content divs float left. Then set the container div to margin-left: 0 auto, and margin-right: 0 auto.
Or in an code
<div class="container">
<div class="background"></div>
<div class="content"></div>
</div>
.container{ margin-right:auto;
margin-left:auto;
height: 1%;
overflow: hidden;
}
.background { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}
.content { display: table;
margin: 0 auto;
widht:400px;
Height: 500px ;
}

Sticky position not working on div element

I'm trying to make a div sticky positioned relative to the viewport so it sticks to the top when it gets scrolled out of view but it isn't working.
#navigation {
display: flex;
background-color: #AA1111;
width: 100%;
height: 50px;
z-index: 10;
position: sticky;
position: -webkit-sticky;
top: 0;
}
header {
height: auto;
display: flex;
}
<body>
<div class="page">
<header>
<div id="navigation">
</div>
</header>
</div>
</body>
Sticky will stick to the top while the parent element is still visible. With that said, your parent element (header) only contains the sticky element, thus will scroll out of view as the navigation would normally. If you had another element inside of the header that had some height, the navigation would stick to the top until that scrolls out of view too.
https://jsfiddle.net/1zbnr2ho/
Like others have said, sticky doesn't have great browser support, and maybe what you're looking for could just be accomplished with position: fixed?
#navigation {
display: flex;
background-color: #AA1111;
width: 100%;
height: 50px;
z-index: 10;
position: sticky;
position: -webkit-sticky;
top: 0;
}
body {
min-height: 5000px;
}
.other {
height: 500px;
background: blue;
}
<div class="page">
<header>
<div id="navigation"></div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</header>
</div>

A better way to place a Div in the center with absolute position?

So here is what i was trying to do
i wanted to have a div with z-index -1 somewhere between 2 other divs to test the parallax effect on it i put everything on the center with margin : 0 auto . but when i changed the parallax div position to absolute, it moved to the left side of the page . next i tried moving it back to center with left :50% it didn't work so what i changed it to left :12.5% and it worked !
But here is my question : could i do it in any other way ?! and is what i did now right or is it gonna cause some problems in the future ?!
here are the codes :
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meaningless Pap</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content1">
<h1>Welcome! </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
<h2> this is a text </h2>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
Css :
body {
font-family: 'lato';
background: url("http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg") #000;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.7;
color: #000;
}
.container {
width: 100%;
margin: 0 auto;
}
.content1 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px 7px 15px #333;
padding: 10px;
z-index: 1;
}
.content2 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px -7px 15px #333;
padding: 10px;
z-index: 1;
margin-top: 200px;
}
.breaker {
position: absolute;
left: 12.5%;
width: 75%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}
.breaker h2 {
padding-top: 50px;
text-align: center;
color: #fff;
}
There is nothing wrong with your approach. The width percentage and the left percentage are calculated in the same way when absolutely positioned - relative to the first parent element that has a position other than static.
An alternative method for an absolutely positioned element would be to specify both left and right positions. This has the advantage of being unaffected by any borders or padding.
.breaker {
position: absolute;
left: 12.5%;
right: 12.5%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}