之所以发生,是因为您为height: 55px
元素定义了.header
。删除它,它应该可以正常工作。
我对元素的位置感到困惑。
这里是代码:
<div class="header"> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif; } .header { width: 100%; height: 55px; border: 1px solid #e7e7e7; background: #f1f0f4; } .nav { text-align: right; } navbar ul li { display: inline-block; padding: 10px; font-size: 15px; margin: 5px; font-weight: bold; } navbar ul li a { color: black; text-decoration: none; } navbar ul li:hover { background: #d3d2d6; } #logo { float: left; text-decoration: none; margin-left: 100px; } #header-img { width: 100%; height: 700px; background: url('./programming.jpeg') no-repeat center /cover; opacity: 0.6; } #text { position: relative; top: 10%; text-align: center; font-size: 40px; color: rgb(0, 0, 0, 1); font-weight: bold; } .body { }
<div class="header"> <navbar class="nav"> <ul> <li id="logo"><i class="fas fa-robot fa-lg"> TSV</i><li> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </navbar> <div id="header-img"> <p id="text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, mollitia?</p> </div> </div> <div class="body"> <h1>TEST</h1> </div>
主要问题是.body div与header-img div重叠,我不太明白为什么会这样。header-img div相对放置,我认为这不会破坏要素。谢谢!
我对我的元素的位置感到困惑。这是代码:
之所以发生,是因为您为height: 55px
元素定义了.header
。删除它,它应该可以正常工作。
.header {
width: 100%;
height: 55px;
border: 1px solid #e7e7e7;
background: #f1f0f4;
}
而且,您可以将此移除的高度明确设置为导航。
.nav {
text-align: right;
height: 55px;
width: 100%;
}
这是因为<header>
元素同时封装了<navbar>
和<div id="header-img">
,但是<header>
元素被设置为height: 55px;
,所以<div id="header-image">
的height: 700px
溢出,从而导致此行为。
删除height: 55px;
表格.header {
。
之所以发生,是因为您为height: 55px
元素定义了.header
。删除它,它应该可以正常工作。
这是因为<header>
元素同时封装了<navbar>
和<div id="header-img">
,但是<header>
元素被设置为height: 55px;
,所以<div id="header-image">
的height: 700px
溢出,从而导致此行为。