You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
It is actually to do with the way you have managed your float attributes. Your div representantes floats left, but the footer does not. You can test this by turning float:left off from the representantes div. This is a common cause of divs overlapping.
To check if two elements overlap, use the getBoundingClientRect() method to get an object containing information about the relative position to the viewport of the elements. Then, compare the boundary edges (top, right, bottom, left) of the two rectangles.
Just use negative margins, in the second div say:
<div style="margin-top: -25px;">
And make sure to set the z-index property to get the layering you want.
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>
With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such:
div#logo {
position: absolute;
left: 100px; // or whatever
}
Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.
Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div.
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:
#logo { float: left; margin: 0 10px 10px 20px; } #content { margin: 10px 0 0 10px; }
or whatever margin you want.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With