css 固定定位 相对定位 绝对定位详解及案例

position:static 默认方式,不设置即为这种方法
position:fixed 固定定位
position:relative 相对定位
position:absolute 绝对定位

下面案例有诚意细标注,请看标注
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.one {
    		width:100px;
    		height:100px;    		
    		background:url(http://www.xiuyuanxi.com/skin/nr/1014720g_2b726f0.png);
    		background-size:100px 100px;
    		/*position:fixed固定定位*/
    		/*依照浏览器窗口来进行的定位。如果不设置定位坐标,就在放置图片的位置*/
    		/*层级比普通标签高*/
    		/*定位坐标属性:left:数值;right:数值;top:数值;bottom:数值*/
    		position:fixed;
    		right:40px;
    		top:100px;
    		}
    	.two{
    		width:110px;
    		height:110px;
    		color:#fff;
    		background:green;
    		/*position:relative 相对定位*/
    		/*如果不结合定位坐标,就是在原来的位置*/
    		/*如果结合定位座标,则相对于自身原来位置,作为定位的原点*/
    		/*相对定位占空间,哪怕移动到别的位置,原位置上依然会被空白所占用。*/
    		/*层级比普通元素高*/
    		position:relative;
    		top:10px;
    		left:100px;
    		}
    	.three{
    		width:110px;
    		height:110px;    		
    		color:#fff;
    		background:blue;
    		/*position:absolute 绝对定位不占空间,层级高于普通元素*/
    		/*不结合定位坐标,则在原来的位置*/
    		/*结合定位坐标,则以浏览器窗口进行定位*/
    		position:absolute;
    		}
    		
    		/*相对定位结合绝对定位使用案例*/
    		.box
	    	{
	    		float:left;
	    		width:500px;
	    		height:350px;
	    		border:1px solid gray;
	    		margin-left:230px;
	    		border-radius:10px;
	    		box-shadow:1px 1px 0 #333;    	
	    		background: url(http://www.xiuyuanxi.com/uploads/soft/17/2.jpg) no-repeat;
	    		background-size:cover; 	
	    		/*父窗口里用相对定位*/
	    		position:relative;
	    		
	    	}
	    	.txt
	    	{
	    			width:500px;
	    			height:40px;
	    			line-height:40px;
	    			text-align:center;
	    			border-radius:0 0 10px 10px ;
	    			background:rgba(255,255,255,0.4);
	    			/*子窗口中用绝对定位*/
	    			position:absolute;
	    			bottom:0;
	    	}
    </style>
</head>
<body>
	<h3>定位方式</h3>
	<h4>
		position:static 默认方式<br>
		position:fixed 固定定位<br>
		position:relative 相对定位<br>
		position:absolute 绝对定位
		</h4>
<div class="one">
</div>	
<div class="two">
	相对定位
</div>
<div class="three">
绝对定位
</div>
<div class="box">
	<div class="txt">相对定位结合绝对定位演示</div>
</div>	
<div style="height:1200px; ">

</div>

	
</body> 
</html>
  

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND