[英]How to place content below a position absolute item
我不确定如何问这个问题，但是我会尽力解释我要完成的工作。我的首页上有一个横幅，在该横幅内有一个与之重叠的div。
现在，通过将此项目重叠在横幅上，这会产生一个问题，我主页上的所有其他内容都在此重叠项目的后面。从发生这种情况开始，我希望所有内容都在其下方。
* { 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>
设计：
谢谢，理查德。
目前尚不清楚为什么在此示例中需要绝对定位，但是我建议您考虑使用position: relative作为横幅后面的内容块。
在布局流程中，相对定位的行为与默认设置（静态）大致相同，但相对于绝对定位，它支持z索引分层。 （如果确实不需要绝对定位，则考虑在横幅上也使用相对位置。）
如何在不影响div更改的情况下将内容放置在位置绝对项下方
[英]How to place content below a position absolute item without affect div changes
可以将项目放置在表中紧随其后的另一个项目之下，而没有绝对位置吗？
[英]Possible to position item below another that comes after it in table without absolute position?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.