.gallery ul li .info .explore设置了距离底部10px，为什么却没有实现呢？

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">GALLERY</a></li>

<li><a href="#">FACULTY</a></li>

<li><a href="#">EVENTS</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<h3>ABOUT</h3>

<p>i love u hahahahdsjafhdsfkjhasdkfhkjasfhkahdskfhjkahfjkh</p>

</div>

</div>

<ul>

<li>

<h2>Library</h2>

<p>12321379812789232323213798<br>12789213798127892321379812<br>7892137981278923213798127893271dfasfasfasf</p>

EXPLORE

</div>

</li>

<li>

<h2>Computer Lab</h2>

EXPLORE

</div>

</li>

</ul>

<li>

<h2>Library</h2>

EXPLORE

</div>

</li>

<li>

<h2>Library</h2>

EXPLORE

</div>

</li>

</ul>

</div>

<h1>GALLERY</h1>

<div class="desc">adsfjljflkdsjlfjlaksdjflsajdflasjlfdjslkjljaflsj

<p>

jfdskajfljfdlasjdsljaf;ljdfljf;dasj;fadjdsljaf;ljdfljf;dasj;fadj

</p>

<p>

jfdskajfljfdlasjdsljaf;ljdfljf;dasj;fadjdsljaf;ljdfljf;dasj;fadj

</p>

</div>

<ul>

<li>

jfdslajflda

</div>

</li>

</ul>

</ul>

</div>

2016 imooc.com京备13046442号

</div>

</body>

</html>

margin: 0;

padding: 0;

font-family: "Microsoft YaHei UI";

}

.container{

position: relative;

}

.header{

width: 1584px;

height: 80px;

background-color: #07cbc9;

margin-left:auto;

margin-right: auto;

}

.header .logo{

float:left;

position: relative;

line-height:80px;

}

.header .logo img{

margin-left:25%;

vertical-align: middle;

}

.header .menu ul{

float:right;

position: relative;

line-height: 80px;

right:50px;

}

.header .menu ul li{

list-style: none;

float:left;

margin-right:12px;

vertical-align: middle;

}

.header .menu ul li a{

text-decoration: none;

color:#FFF;

}

.header .menu ul li:hover{

text-decoration: none;

background-color: black;

}

.banner{

position: relative;

width: 1584px;

margin-left:auto;

margin-right:auto;

z-index: 10;

overflow: hidden;

}

.banner .messageBoard ul{

list-style: none;

margin-top:20px;

position: absolute;

top:200px;

left:50%;

margin-left:-240px ;

z-index: 80;

}

.banner .messageBoard ul li input:hover{

border-color:#07cbc9;

}

.banner .messageBoard ul li input.submitButton:hover{

background-color: #07cbc9;

color:#FFF;

}

.banner .bannerBg{

width:1700px;

height: 800px;

background-color:#000;

z-index:1;

position: absolute;

opacity: 0.5;

top:0;

}

.banner .messageBoard ul li input{

width:480px;

height: 28px;

border: #666 2px solid;

outline: none;

margin-top:20px;

background-color: transparent;

z-index: 90;

}

.banner .messageBoard ul li input.submitButton{

width:180px;

height: 50px;

color: #666;

position: absolute;

left:50%;

margin-left: -90px;

z-index:100;

}

.banner .messageBoard ul li #comment {

width: 480px;

height: 120px;

}

.about{

width:1584px;

height: 600px;

position: relative;

top:80px;

text-align: center;

left:30%;

overflow: hidden;

}

.about .about-top{

position: relative;

left:50%;

text-align: center;

}

.about .about-top h3{

color:#FFF;

position: absolute;

left:50%;

}

.gallery ul{

width:1584px;

height:396px;

background-color:#07cbc9;

top:280px;

position: relative;

list-style: none;

margin-top:-9px;

padding-top:0;

margin-left:auto;

margin-right:auto;

}

.gallery ul li{

float:left;

width: 396px;

height:396px;

position:relative;

}

/* .GALLERY ul li.GALLERY-TEXT{

color:#FFF;

position: relative;

left: 29px;

margin-top:32px; */

.gallery ul li .info{

color:#FFF;

text-align: center;

position: relative;

}

.gallery ul li .info h2{

margin-top:40px;

margin-bottom:12px;

}

.gallery ul li .info p{

margin-left:30px;

}

.gallery ul li .info .explore{

width:160px;

height: 60px;

text-align: center;

background-color: black;

text-align: center;

line-height: 60px;

position:absolute;

left:50%;

bottom:10px;

/* 为什么这里设置了距离底部10px 按钮却没有实现呢？ */

margin-left:-80px;

}

.gallery .GALLERY-SECOND li{

float:left;

width: 396px;

height:396px;

position:relative;

top:-12px;

}

.GALLERY-PIC-TEXT{

width:1584px;

position:relative;

top:700px;

margin-left:auto;

margin-right:auto;

}

.GALLERY-PIC-TEXT .henxian{

width:40px;

height:2px;

background-color: #07cbc9;

margin-top:20px;

position: absolute;

top:52px;

left:50%;

margin-left:-30px;

}

.footer{

width:1584px;

height:40px;

background-color: #07cbc9;

margin-left:auto;

margin-right:auto;

position: relative;

top:1800px;

text-align: center;

line-height: 40px;

color:#FFF;

overflow: hidden;

}

.GALLERY-PIC-TEXT .desc{

color:#666;

position: absolute;

top:118px;

left:50%;

margin-left:-200px;

}

.GALLERY-PIC-TEXT h1{

position: absolute;

top:20px;

left:50%;

margin-left:-80px;

}

.GALLERY-CONTENT{

position: relative;

top:180px;

}

.GALLERY-CONTENT ul{

position: absolute;

list-style: none;

left:50%;

margin-left:-620px;

margin-top:40px ;

}

ul.GALLERY-CONTENT-SEC{

position: relative;

list-style: none;

left:50%;

margin-left:-620px;

top:320px;

}

.GALLERY-CONTENT li{

float:left;

margin-right:40px;

}

.GALLERY-CONTENT li .pic-desc{

position: absolute;

top:0;

width:140px;

height:20px;

background-color: red;

}

晓舟 2021-11-21

源自：前端企业门户网站案例 1-1 项目导引

收起

2回答

好帮手慕小尤 2021-11-21 16:37:32

同学你好，同学的参照物是父元素.gallery ul li .info，而不是p标签。如下所示：所以当设置为bottom:10px时，会在p标签的上面。

建议同学去除.gallery ul li .info中的relative定位，使其可以参照.gallery ul li进行定位。

祝学习愉快！

收起回答

提问者晓舟 #1

谢谢，明白了

2021-11-21 16:42:47

晓舟提问者 2021-11-21 14:25:53

为什么他是以p标签的内容为参造呢？

收起回答

提问者晓舟 #1

我已经通过其他两种以上的方法实现了，主要是纠结这里为什么会以p标签为参照而不是以父系div.info为参考？父系div设置了position的relative属性，div.explore也设置了position的absolute属性明显这里bottom应该是根据父系div的框架来定位呀。

2021-11-21 15:16:43