position属性
static:默认值,没有定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
relative(相对定位)
相对于自身,有四个属性 top right left bottm
一般不自己使用,结合绝对定位一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>花样连接卡</title>
</head>
<link rel="stylesheet" href="css/index.css" />
<body>
<div class="zt">
<div class="one">链接1</div>
<div class="two">链接2</div>
<div class="three">链接3</div>
<div class="four">链接4</div>
<div class="five">链接5</div>
</div>
</body>
</html>
.zt{
width: 600px;
height: 600px;
border:red 1px solid ;
}
.one{
width: 200px;
height: 200px;
border:red 1px solid ;
background-color: #FF88FD;
}
.two{
width: 200px;
height: 200px;
border:red 1px solid ;
float:right ;
position:relative ;
bottom:200px ;
background-color: #FF88FD;
}
.three{
width: 200px;
height: 200px;
border:red 1px solid ;
position:relative ;
left:200px ;
background-color: #FF88FD;
}
.four{
width: 200px;
height: 200px;
border:red 1px solid ;
background-color: #FF88FD;
}
.five{
width: 200px;
height: 200px;
border:red 1px solid ;
float: right;
position:relative ;
bottom:200px ;
background-color: #FF88FD;
}
.one:hover{
background-color: #0099FF;
}
.two:hover{
background-color: #0099FF;
}
.three:hover{
background-color: #0099FF;
}
.four:hover{
background-color: #0099FF;
}
.five:hover{
background-color: #0099FF;
}
.one{
color:white ;
font-size: 20px;
padding: 80px 70px;
box-sizing:border-box ;
}
.two{
color:white ;
font-size: 20px;
padding: 80px 70px;
box-sizing:border-box ;
}
.three{
color:white ;
font-size: 20px;
padding: 80px 70px;
box-sizing:border-box ;
}
.four{
color:white ;
font-size: 20px;
padding: 80px 70px;
box-sizing:border-box ;
}
.five{
color:white ;
font-size: 20px;
padding: 80px 70px;
box-sizing:border-box ;
}
absolute(绝对定位)
相对于左上角,如果祖辈有相对定位或绝对定位,则是相对于祖辈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="css/index02.css"rel="stylesheet" />
<body>
<div class="zt">
<img src="img/adver-01.jpg" class="one"/>
<img src="img/皇冠.png" class="two"/>
</div>
<div class="zt">
<img src="img/adver-01.jpg" class="one"/>
<img src="img/皇冠.png" class="two"/>
</div>
<div class="zt">
<img src="img/adver-01.jpg" class="one"/>
<img src="img/皇冠.png" class="two"/>
</div>
<div class="zt">
<img src="img/adver-01.jpg" class="one"/>
<img src="img/皇冠.png" class="two"/>
</div>
<div class="zt">
<img src="img/adver-01.jpg" class="one"/>
<img src="img/皇冠.png" class="two"/>
</div>
</body>
</html>
.zt{
width: 200px;
height: 200px;
position: relative;
float: left;
}
.one{
width:80px ;
height: 80px;
padding-left:50px ;
padding-top: 50px;
}
.two{
position:absolute ;
right: 30px;
top:15px ;
}
fixed(固定定位)
常见于一键回到顶部,导航栏不动
div:nth-of-type(1) { /*第一个div设置绝对定位*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) { /*第二个div设置固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
z-index
调整元素定位时重叠层的上下位置z-index属性值:整数,默认值为0
设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当当图书榜</title>
</head>
<link rel="stylesheet" href="css/index04.css" />
<body>
<div class="zt">
<img src="img/logo.jpg" class="one"/>
<img src="img/icon_count.png" class="two"/>
<div class="three">唯品会 当当优品 数字馆 都看阅器</div>
<div class="four">
<ul>
<li>首页</li>
<li>图书</li>
<li>音像</li>
<li>童装</li>
<li>服装</li>
<li>鞋靴</li>
<li>运动</li>
<li>箱包</li>
<li>美妆</li>
<li>珠宝</li>
<li>家具</li>
<li>食品</li>
<li>酒</li>
<li>手机</li>
<li>数码</li>
<li>电脑</li>
<li>家电</li>
</ul>
</div>
<div class="five"><img src="img/banner.png" /></div>
<div class="six">
<img src="img/bg_bang.gif" class="seven">
<img src="img/bookNo1.gif" class="eight"/>
<img src="img/bookNo2.gif" class="nine"/>
<img src="img/bookNo3.gif" class="ten"/>
<img src="img/book-01.jpg"class="one"/>
<img src="img/book-02.jpg"class="two"/>
<img src="img/book-03.jpg"class="three"/>
<div class="zj">
<dl>
<dt>偷影子的人 </dt>
<dd>作 者:[法] 马克·李维(Marc Levy)著,段韵灵 译</dd>
<dd>出版社:湖南文艺出版社</dd>
<dd>当当价:<span >¥ 17.90</span></dd>
<dd>不知道姓氏的克蕾儿。这就是你在我生命里的角色</dd>
<dd>我童年时的小女孩,今日蜕变成了女人,一段青</dd>
<dd>马的回忆,一个时间之神没有应允的愿望。 一个老是</dd>
<dd>受班上同学欺负的瘦弱小男孩,因为拥有一种特殊能</dd>
<dd>力而强大:他能“偷别人的影子”,因而能看见他</dd>
</dl>
</div>
<div class="zj1">
<dt>看见(央视知名记者、主持人柴静:十年个人成长的告白,中国社会变迁的备忘 </dt>
<dd>作 者:柴静 著</dd>
<dd>出版社:广西师范大学出版社</dd>
<dd><span>¥ 29.40</span> <span class="l">7.4折</span></dd>
</div>
<div class="zj2">
<dt>改变孩子先改变自己 </dt>
<dd>作 者:贾容韬 贾毅 著</dd>
<dd>出版社:作家出版社</dd>
<dd><span>¥ 22.20</span> <span class="l">7.4折</span></dd>
</div>
</div>
<span class="xia">Copyright (C) 当当网 2004-2017, All Rights Reserved京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
</div>
</body>
</html>
.zt{
margin: 0 auto;
width:2000px ;
height:1100px ;
position: relative;
}
*{
padding:0 ;
margin: 0;
}
.one{
position:absolute ;
top: 0;
left: 0;
}
.two{
position:absolute ;
top: 0;
right: 250px;
}
.three{
width: 300px;
height: 35px;
background-color:#EAFFFA ;
position: absolute;
top: 20px;
right: 0px;
line-height: 35px;
font-size:16px ;
text-indent:10px ;
word-spacing:10px ;
}
.four{
background-color:#FE6915 ;
width: 100%;
height: 50px;
position:absolute ;
top: 60px;
}
.four li{
float: left;
list-style:none ;
color:white ;
font-size: 20px;
margin-left: 70px;
line-height: 50px;
}
li:hover{
text-decoration:underline ;
}
.five{
width:100% ;
height: 120px;
position: absolute;
left: 0;
top:120px ;
}
.five img{
width: 100%;
height: 100%;
}
.six{
height: 720px;
width:2000px ;
border: 1px solid #8EC758;
position:absolute ;
bottom: 100px;
}
.seven{
position: relative;
top: 20px;
left:-10px ;
}
.eight{
position:absolute ;
top: 100px;
left:30px ;
z-index: 1;
}
.nine{
position:absolute ;
top: 140px;
right:470px ;
z-index: 1;
}
.ten{
position:absolute ;
top: 350px;
right:470px ;
z-index: 1;
}
.six .one{
position:absolute ;
top: 105px;
left:15px ;
}
.six .two{
position:absolute ;
top: 150px;
right:400px ;
}
.six .three{
position:absolute ;
top: 350px;
right:400px ;
width:100px ;
height: 100px;
}
.zj{
height: 400px;
width:400px ;
position: absolute;
bottom: 200px;
left: 300px;
}
dt{
line-height: 40px;
color: #ABC7E3;
}
dd{
line-height: 25px;
}
span{
color: #E2B19C;
font-weight: bold;
}
.zj1{
height: 200px;
width: 400px;
position:absolute ;
bottom: 370px;
right:0px ;
}
.zj2{
height: 200px;
width: 400px;
position:absolute ;
bottom: 150px;
right:0px ;
}
.l{
color: #96CA64;
}
.xia{
position:absolute ;
bottom: 20px;
left: 500px;
color: #9C989C;
}
网页元素透明度
opacity:x | x值为0~1,值越小越透明 | opacity:0.4; |
filter:alpha(opacity=x) | x值为0~100,值越小越透明 | filter:alpha(opacity=40); |