How to place content below a position absolute item
Question
I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* { margin: 0; padding: 0; box-sizing: border-box; } body { color: #444; font-size: 13px; background-color: #fafafa; font-family: Arial, sans-serif; } .container { height: auto; width: 1200px; margin: 0 auto; overflow: hidden; } secion { width: 100%; height: auto; background-color: #fff; } header { width: 100%; height: 168px; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16); } .top-nav { width: 100%; height: 42px; background-color: white; } .top-nav ul { float: left; line-height: 42px; list-style-type: none; } .top-nav ul li { display: inline-block; } .top-nav ul li a, a:visited { color: #444; padding: 42px 12px; text-decoration: none; } .top-nav ul li a:hover { background-color: #fafafa; } .center-console { width: 100%; height: 80px; background-color: #f4f4f4; } header nav { width: 100%; height: 46px; background-color: #fff; } header nav ul { float: left; line-height: 46px; list-style-type: none; } header nav ul li { margin: 0; display: inline-block; } header nav ul li a, a:visited { color: #444; padding: 46px 12px; text-decoration: none; color: rgba(0,0,0,.54); } header nav ul li a:hover { color: #15c; background-color: #fff; box-shadow: 0 4px 8px 0 #dcdcdc; } .logo { float: left; width: 200px; height: 50px; margin-top: 15px; background-color: #fff; } .center-console form { float: right; width: 400px; height: 40px; padding: 0 15px; margin-top: 20px; border-radius: 3px; background-color: #fff; } .search-icon-small { width: 18px; height: 19px; float: right; margin-top: 11px; background-repeat: no-repeat; background-image: url("../images/search-icon-small.png"); } header form input[type=text] { border: 0; width: 342px; height: 40px; outline: none; background-color: #fff; } .shopping-cart { width: 38px; height: 32px; float: right; margin-top: 7px; font-size: 25px; background-repeat: no-repeat; background-image: url("../images/shopping-cart.png"); background-position:bottom; } .item-count { color: #fff; width: 18px; height: 18px; float: right; font-size: 10px; line-height: 19px; font-weight: bold; border-radius: 50%; text-align: center; background-color: #4683ea; } /*** Homepage ***/ .banner { width: 100%; height: 480px; background-color: #4387fd; } .banner form { width: 880px; height: 50px; margin: 0 auto; padding: 0 15px; margin-top: 228px; border-radius: 3px; background-color: #fff; } .search-icon { width: 30px; height: 30px; float: right; margin-top: 10px; background-repeat: no-repeat; background-image: url("../images/search-icon.png"); } .banner form input[type=text] { border: 0; width: 805px; height: 50px; outline: none; background-color: #fff; } .featured-items { width: 1200px; height: 358px; padding: 21px; margin-top: 100px; border-radius: 6px; position: absolute; overflow: hidden; background-color: #fff; } .featured-items ul { list-style-type: none; } .featured-items ul li { float: left; width: 214px; height: 214px; margin-right: 22px; background-color: #f5f5f5; } .featured-items ul li:last-child { margin: 0; float: right; } footer { width: 100%; height: 400px; margin-top: 80px; overflow: hidden; background-color: red; }
<!DOCTYPE html> <html> <head> <title>BasicOffer</title> <link rel="stylesheet" type="text/css"href="css/main.css"> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> </head> <body> <header> <nav class="top-nav"> <div class="container"> <ul> <li><a href="#">Selling</a></li> <li><a href="#">Help</a></li> </ul> <ul style="float:right;"> <li><a href="#">Account</a></li> </ul> </div> </nav> <div class="center-console"> <div class="container"> <div class="logo"></div> <form> <input type="text" placeholder="Search.."> <div class="search-icon-small"></div> </form> </div> </div> <nav> <div class="container"> <ul> <li><a href="#">Health & Beauty</a></li> <li><a href="#">Household Supplies</a></li> <li><a href="#">Baby & Toddler</a></li> <li><a href="#">Home & Garden</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Pet Supplies</a></li> </ul> <div class="shopping-cart"> <div class="item-count">11</div> </div> </div> </nav> </header> <div class="banner"> <div class="container"> <form> <input type="text" placeholder="What are you looking for?"> <div class="search-icon"></div> </form> <div class="featured-items"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> <footer>This will be the footer</footer> </body> </html>
Design:
Thanks, Richard.
2 answers
solution1
2 ACCPTED 2017-02-04 06:41:15
Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
solution2
0 2017-02-04 06:32:11
It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)
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.