web前端基础 html5+css3（八.定位与元素的显示隐藏）

1.定位

top left right bottom

（1）postion:static  静态定位

（2）postion:relative  相对定位

相对定位是相对于它原来的位置来说的（自恋型）

不脱标，继续保留原来的位置

.box1{
	position: relative;
	left:20px;
	top:100px;
	width: 200px;
	height: 200px;
	background: blue;
}
.box2{
	width: 200px;
	height: 200px;
	background: #c00;
}
<div class="box1"></div>
<div class="box2"></div>

（3）postion:absolute  绝对定位

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）

2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置

3.绝对定位不再占有原先的位置（脱标）

.father{
	position: relative;
	width: 200px;
	height: 500px;
	background: blue;
}
.son{
	position:absolute;
	/*top:20px;*/
	left:100px;
	bottom:0;
	width: 200px;
	height: 200px;
	background: #c00;
}
<div class="father">
	<div class="son"></div>
</div>

在元素中top和bottom同时存在，会先读top的值，left和right同时存在，会读left的值

父元素没有定位，则以爷爷辈的为基准

.yeye{
	position: relative;
	width: 500px;
	height: 700px;
	background: skyblue;
}
.father{
	/*position: relative;*/
	width: 200px;
	height: 500px;
	background: blue;
}
.son{
	position:absolute;
	/*top:20px;*/
	/*left:100px;*/
	bottom:50px;
	width: 200px;
	height: 200px;
	background: #c00;
	right:20px;
}
<div class="yeye">
	<div class="father">
		<div class="son"></div>
	</div>
</div>

*子绝父相（重点）

子级是绝对定位的话，父级要用相对定位

（1）子级绝对定位，不会占有位置，可以放在父盒子的任何一个地方。不会影响其他的兄弟盒子

（2）父盒子需要加定位限制子盒子在父盒子的显示

（3）父盒子布局时，需要占有位置，因此父元素只能是相对定位

（4）postion:fixed  固定定位

1.以浏览器的可视窗口为参照点移动元素

      跟父元素没有关系

      不随滚动条滚动

2.固定定位不占有原先的位置

.dj{
	position: fixed;
	top: 20px;
	right: 40px;
}
<div class="dj">
	<img src="images/dj.png"/>
</div>

课后作业：两侧固定的导航栏

.left{position: fixed;left:20px;top:40px; width: 50px;height: 200px;background: #c00;}
.right{position: fixed;right:20px;top:40px; width: 50px;height: 200px;background: #999;}
<div class="left"></div>
<div class="right"></div>

3.固定在版心的右侧位置

left :50% margin-left:版心一半宽度

.main{width: 1220px;height: 1000px;background: #c00;margin:0 auto;}
.fixed{position: fixed;top: 300px;left: 50%;width: 200px;height: 300px;background: pink;margin-left: 630px;}
<div class="fixed"></div>
<div class="main"></div>

（5）position:sticky 粘型布局

以浏览器的可视窗口为参照点移动元素（固定定位特点）

占有原先的位置（相对定位特点）

必须添加top,left,right,bottom其中一个才有效

相对定位和固定定位的混合

body{height: 2000px;}
.sticky{position:sticky;top:0; width: 800px;height: 300px;margin:50px auto; background:pink;}
<div class="sticky"></div>

（6）z-index 定位叠放顺序

数值可以是正整数，负整数，0 ，auto，数值越大，盒子越靠上

属性值相同，就按照书写顺序，后来居上

定位的盒子才有z-index属性

数字后面不能加单位

.xOne{position: absolute;top:0;z-index: 3; width:500px;height:800px;background: #c00;}
.xTwo{position: absolute;z-index: 2; top:0; width:300px;height:500px;background: #999;}
.xGuang{position: absolute;top:0;  width:200px;height:300px;background: #333;}
<div class="xOne"></div>
<div class="xTwo"></div>
<div class="xGuang"></div>

（7）绝对定位的盒子居中算法

left:50%;margin-left:-自身宽度的一半；

.xGuang{position: absolute;top:50%; margin-top:-150px;left:50%;margin-left: -100px; width:200px;height:300px;background: pink;}
<div class="xGuang"></div>

1.行内元素添加相对定位或者固定定位，可以直接设置高度和宽度

2.块级元素添加相对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

（8）脱标的盒子不会触发外边距塌陷（浮动元素，绝对定位，固定定位的元素都不会触发外边距合并的问题）

（9）绝对定位（固定定位）会完全压住它下面标准流的盒子，浮动不会（浮动一开始就是为了文字环绕创造的）

/*1.浮动的元素不会压住下面标准流的文字*/
/*.box{float:left;width:50px;height:50px;background: pink;}*/
/*2.绝对定位（固定定位）会压住下面标准流所有的内容*/
.box{position:absolute; width:500px;height:50px;background: pink;}
<div class="box"></div>
<p>桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。
桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。
桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。
桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。
桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。
桃花坞里桃花庵，桃花庵下桃花仙。桃花仙人种桃树，又摘桃花换酒钱。</p>

案例1：淘宝焦点图布局制作（轮播图）

.box{position: relative;width: 520px;margin: 200px auto;}
.prev,.next{position: absolute;top: 50%;width: 20px;height: 30px;margin-top: -15px;background: rgba(0,0,0,.7);color: #Fff;line-height: 25px;text-decoration: none;}
.prev{left: 0;margin-left: 20px;padding-left: 5px;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}
.next{right: 0;margin-right: 20px;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}
.tb_nav{position: absolute;left: 50%;bottom: 15px;width: 72px;margin-left: -35px;}
.tb_nav li{float: left;height: 8px;margin: 0 2px;background: #fff;list-style: none;width: 8px;border-radius: 15px;}
.tb_nav .select{background: pink;}
<div class="box">
	<img src="images/tb.jpg"/>
	<a href="#" class="prev">&lt;</a>
	<a href="#" class="next">&gt;</a>
	<ul class="tb_nav">
		<li></li>
		<li class="select"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

2.元素的显示和隐藏

（1）display:显示隐藏

display: none隐藏元素后，不再占有原来的位置

.qiaozhi{width: 200px;height: 200px;background: #c00;display: none;}
.pigfather{width: 200px;height: 200px;background:pink;}
<div class="qiaozhi">乔治</div>
<div class="pigfather">猪爸爸</div>

（2）visibility:显示隐藏

visibility:visible 元素可见

visibility:hidden 元素隐藏

visibility:hidden隐藏元素后，继续占有原来的位置

.qiaozhi{width: 200px;height: 200px;background: #c00;visibility:hidden;}
.pigfather{width: 200px;height: 200px;background:pink;}
<div class="qiaozhi">乔治</div>
<div class="pigfather">猪爸爸</div>

（3）overflow:溢出显示隐藏

.qiaozhi{
	width: 50px;
	height: 200px;
	background: #c00;
	/*隐藏多余文字*/
	/*overflow:hidden;*/
	/*溢出部分显示滚动条，不溢出也显示滚动条*/
	/*overflow: scroll;*/
	/*溢出部分显示滚动条，不溢出不显示滚动条*/
	overflow: auto;
}
<div class="qiaozhi">乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治乔治</div>

案例2：仿土豆网显示隐藏遮罩层

.tudou{position: relative;width: 448px;height: 300px;margin: 0 auto;}
.tudou img{width: 100%;height: 100%;}
.mask{display: none; position: absolute;height: 100%;background: rgba(0,0,0,.3) url("images/arr.png") no-repeat center;width: 100%;}
.tudou:hover .mask{display: block;}
<div class="tudou">
	<div class="mask"></div>
	<img src="images/tudou.jpg"/>
</div>