问下那个三角形定位的问题
想问下是不是img加了position: relative; 三角形添加了absoulute，意思就是三角形相对于img的位置给他进行一个绝对定位？为什么我加了以后三角形不能相对于图片定位到相应的位置，给他设置的top值是整个页面的值了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="header"> <div class="logo"> <img src="./images/logo.png"> </div> <div class="nav"> <ul> <a href="#"><li>HOME</li></a> <a href="#"><li>ABOUT</li></a> <a href="#"><li>GALLERY</li></a> <a href="#"><li>FACULTY</li></a> <a href="#"><li>EVENTS</li></a> <a href="#"><li>CONTACT</li></a> </ul> </div> </div> <div class="clear"></div> <!-- Container区域 --> <div class="container"> <!-- bannert区域 --> <div class="banner"> <div class="bgcolor"></div> <img src="./images/banner3.jpg"> <div class="divtext"> <form> <input type="text" name="name" placeholder="your Name"/> <br> <input type="text" name="name" placeholder="your Phone"/> <br> <input type="text" name="name" placeholder="your Email"/> <br> <textarea name="write" placeholder="Wirte Your Comment Here"></textarea> <br> <input type="submit" name="button" value=" SEND MESSAGE"/> </form> </div> </div> <div class="clear"></div> <!-- about区域 --> <div class="about"> <!-- 文本区域上 --> <div class="abtext"> <div class="text1">ABOUT</div> <div class="line"></div> <div class="text2">Lorem ipsum is simply dummpy text of the printing and typesetting <br>industy. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</div> </div> <!-- 文本区域下--> <div class="bottom"> <div class="left"> <h1>A WORD<br> ABOUT US</h1> </div> <div class="middle"> <img src="./images/bb3.jpg"> </div> <div class="right"> <div class="topbk"> <div class="text1">70000</div> <div class="line"></div> <div class="text2">students</div> </div> <div class="bottombk"> <div class="text1">600</div> <div class="line"></div> <div class="text2">faculty</div> </div> </div> <div class="fly"> <P>praesent dignissim viverra est,sed<br> bibendum ligula congue non.sed ac nisl<br> et felis gravida commodo?Suspendisse<br> eget ullamcoper ipsum.suspendisse<br> diam amet.</P> <button class="button">EXPLORE</button> <div class="bgc"></div> </div> </div> <!-- about区域 --> </div> <div class="abouttwo"> <!-- line1区域 --> <div class="line1"> <div><img src="./images/b1.jpg"> <div class="sj"></div> </div> <div class="bgc"> <h1>Library</h1> <h3> Lorem Ipsum is simply dummy text of the printing and typesettingindustry </h3> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <button class="button">EXPLORE</button> </div> <div><img src="./images/b2.jpg"></div> <div class="bgc"> <h1>Computer Lab</h1> <h3> Lorem Ipsum is simply dummy text of the printing and typesettingindustry </h3> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <button class="button">EXPLORE</button> </div> </div> <!-- line2区域 --> <div class="line2"> <div class="line1"> <div class="bgc"> <h1>Conference Hall</h1> <h3> Lorem Ipsum is simply dummy text of the printing and typesettingindustry </h3> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <button class="button">EXPLORE</button> </div> <div><img src="./images/b3.jpg"></div> <div class="bgc"> <h1>Play Ground</h1> <h3> Lorem Ipsum is simply dummy text of the printing and typesettingindustry </h3> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <button class="button">EXPLORE</button> </div> <div><img src="./images/b4.jpg"></div> </div> </div> <!-- abouttwo区域 --> </div> <div class="gallery"></div> <!-- Container区域 --> </div> </body> </html>
*{
padding:0;
margin:0;
}
.clear{
clear:both;
}
.header{
background: #07cbc9;
width:100%;
height:80px;
position: fixed;
top:0;
z-index:2;
}
.logo{
float:left;
padding-left:80px;
padding-top:20px;
}
.nav{
float:right;
padding-right:50px;
padding-top:0;
line-height:80px;
height:80px;
}
.nav ul li{
display:block;
padding-right:20px;
float:right;
color:white;
}
.banner .bgcolor{
background:black;
width:100%;
height:800px;
position: absolute;
opacity: 0.5;
}
.banner img{
width:100%;
height:800px;
padding-top:0;
}
.banner{
width:100%;
padding-top: 0;
}
.banner input{
width:500px;
height:50px;
border:2px solid #ccc;
margin:10px;
}
.banner input:hover{
border: 2px solid #07cbc9;
}
.banner textarea:hover{
border: 2px solid #07cbc9;
}
.banner textarea{
width:500px;
height:115px;
border:2px solid #ccc;
margin:10px;
}
.banner .text{
padding-top: 0;
}
.divtext{
position: absolute;
height:800px;
width:100%;
text-align: center;
top:241px;
}
.container{
padding-top: 80px;
}
input,textarea{
background: transparent;
color: gray;
font-size: 14px;
}
.about{
width:100%;
height:800px;
text-align: center;
}
.about img{
width:568px;
height:380px;
position: absolute;
z-index:-1;
}
.about .abtext .line{
margin:10px auto;
}
.about .abtext .text3{
color:gray;
font-size: 12px;
margin:55px;
}
.about .abtext .text1 {
font-weight: bold;
font-size: 48px;
}
.abtext{
padding-top:50px;
}
.about .abtext .line{
background: #07cbc9;
width:40px;
height:2px;
text-align: center;
}
.about .button{
width:102px;
height:45px;
line-height:45px;
background:black;
color:white;
font-size: 14px;
margin-top: 20px;
position: absolute;
}
.about .button1{
margin-left:-800px;
position: relative;
z-index:1;
}
.about .bk1{
position: relative;
background:white;
opacity: 0.8;
height:246px;
top:-200px;
z-index:-1;
}
.container .about .bottom{
width: 1200px;
height:500px;
margin: 50px auto;
position: relative;
}
.container .about .bottom h3,.middle ,.left,.right{
float:left;
}
.container .about .bottom .right .topbk , .bottombk{
width:238px;
height:144px;
border:1px solid #07cbc9;
margin-bottom: 30px;
margin-left: 720px;
}
.container .about .bottom .middle img{
padding-left:126px;
}
.about .bottom .right .topbk .line{
background: #07cbc9;
width:40px;
height:2px;
margin-left:100px;
margin-top:15px;
}
.about .bottom .right .topbk .text1{
font-size:30px;
font-weight: bold;
padding-top:20px;
}
.about .bottom .right .topbk .text2{
padding-top:10px;
font-size:20px;
font-weight: bold;
}
.about .bottom .right .bottombk .line{
background: #07cbc9;
width:40px;
height:2px;
margin-left:100px;
margin-top:15px;
}
.about .bottom .right .bottombk .text1{
font-size:30px;
font-weight: bold;
padding-top:20px;
}
.about .bottom .right .bottombk .text2{
padding-top:10px;
font-size:20px;
font-weight: bold;
}
.container .about .bottom .fly{
float:left;
position: absolute;
top:150px;
left:50px;
z-index: 1;
text-align: left;
color:black;
}
.container .about .bottom .fly .bgc{
background: white;
opacity: 0.5;
width: 370px;
height: 246px;
position: absolute;
top:-40px;
left:-40px;
z-index: -1;
border:1px solid gray;
}
.container .abouttwo{
width: 100%;
height:800px;
}
.container .abouttwo .line1 .bgc{
width: 25%;
height: 400px;
background: #07cbc9;
float:left;
position: relative;
}
.container .abouttwo .line1 img {
float: left;
width:25%;
height: 400px;
position: relative;
}
.sj:before{
content: "";
position: absolute;
width:0;
height:0;
right:0;
border-top:15px solid transparent;
border-right:25px solid #07cbc9;
border-bottom:15px solid transparent;
top:150px;
z-index: 999;
}
.container .abouttwo .line1 , .line2{
width: 100%;
height:400px;
}
.container .abouttwo .line1 .bgc h3, .container .abouttwo .line1 .bgc p{
color: white;
padding:15px 100px;
}
.line1 .bgc h1{
padding-top:40px;
padding-left:100px;
color: white;
}
.container .abouttwo .line1 .bgc .button{
width:102px;
height:45px;
line-height:45px;
background:black;
color:white;
font-size: 14px;
margin-top: 25px;
margin-left: 40%;
position: absolute;
}29
收起
正在回答 回答被采纳积分+1
3回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星