How would you make two divs overlap?
I might approach it like so (CSS and HTML):
html,body { margin: 0px;}#logo { position: absolute; /* Reposition logo from the natural layout */ left: 75px; top: 0px; width: 300px; height: 200px; z-index: 2;}#content { margin-top: 100px; /* Provide buffer for logo */}#links { height: 75px; margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */}
<div id="logo"> <img src="https://via.placeholder.com/200x100" /></div><div id="content"> <div id="links">dssdfsdfsdfsdf</div></div>
How to make a div overlap other
Using position: absolute;
for the red div will cause it to "float", and then the blue div will start at the same location as the red one.
See code snippet:
#red { height: 100px; width: 20px; border: 1px; background: red; position: absolute;}#blue { height: 100px; background: blue;}
<div id="red"></div><div id="blue"></div>
Two divs with position absolute overlapping with each other
It can't be done as such because position: absolute
is designed to allow you to specify an absolute position for an element.
You can use either top
or bottom
with member elements to place it accordingly.
<div id="div1" class="divcontent">
<span>Some text</span>
</div>
<div id="div2" class="divcontent" style="bottom: 5px;">
<span>Some other text</span>
</div>
Check here
If you want it a bit generic, then create a CSS padding-bottom-05 { padding-bottom: 5px; }
then with html
<div id="div2" class="divcontent padding-bottom-05">
Two relative divs overlap each other
Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body { padding: 0; margin: 0;}.container { width: 30%; margin: 0 35%; background: yellow; position: relative; height: 900px;}.p1_1 { position: relative; width: 50%; height: 70%; left: 0; top: 10%; background-color: green;}.p1_2 { position: relative; width: 100%; height: 20%; border: 1px solid blue; top: 10%;}
<div class="container"> <div class="p1_1"> top box </div> <div class="p1_2"> hello box </div></div>
Related Topics
Any Way to Declare a Size/Partial Border to a Box
What Is a User Agent Stylesheet
Why Does the Order of Media Queries Matter in Css
Is Quoting the Value of Url() Really Necessary
What's the Difference Between Scss and Sass
How to Conditionally Apply a Class
How to Style a Select Tag'S Option Element
Css to Select/Style First Word
Difference Between Normalize.Css and Reset Css
Position Deeply Nested Elements in a Higher Level Grid Container
How to Style the ≪Option≫ With Only Css
Make Flex-Grow Expand Items Based on Their Original Size
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
Difference Between Margin and Padding
How to Write a ':Hover' Condition For 'A:Before' and 'A:After'