CSS笔记:浅谈position属性

之前并没有在意position的使用,在此专门花时间总结了一下它的用法。

何谓position

position属性定义建立元素布局所用的定位机制。值得一提的是,任何元素都可以定位,不过绝对或固定元素能生成一个块级框,而不论该元素本身是什么类型。

目前,所有主流浏览器都支持position属性,以下是浏览器对position属性兼容性的概况图:


注:任何版本的IE浏览器(包括IE8)都不支持属性值"inherit“。

position的基本概况

首先,除去"inherit"属性(规定应该从父元素继承position值),position共有四个属性值:static、relative、absolute、fixed

static属性值

position的默认属性值,即对元素布局不做任何的修饰,元素在正常流中显示(忽略top、bottom、left、right或者z-index声明)。

relative属性值

进行相对定位,相对于该元素的包含块(用在这里不够贴切,或者说relative用包含块来解释未免有点多次一举,所以这一句可以忽略对于relative)进行定位,即相对于其正常位置进行定位。元素的位置通过"top"、”bottom“、"left"、"right"来进行定位。

注:包含块,浅显来讲,我们可以打个比方,假设该元素是棋子,那么包含块就是该棋子的棋盘,棋子的定位就是相对棋盘的定位,关键是棋盘在哪?哪个棋盘是属于我的?我要怎样区分判断出棋盘?总的来说,落子很简单,关键我棋盘在哪。(关于包含块的详细用法规范,可以看下我收藏的一篇文章:http://blog.csdn.net/yaodebian/article/details/73826809)

absolute属性值

相对于static定位以外的第一个父元素进行定位,就是说,向上搜寻第一个position属性值不为"static"的父元素,并以该父元素构建的包含块为参照物进行定位,即相对该父元素进行定位,该父元素就是该元素的包含块。元素的位置通过"top"、”bottom“、"left"、"right"来进行定位。注:有一个特例,就是说我没有找到这样一个父元素,这种情况下,该元素的包含块就是根元素,这个我们等会在详细解释。

Fixed属性值

相对于浏览器窗口定位,也就是始终以窗口的左上角为参照进行定位,即不会因为滚动条的移动而移动,始终相对窗口定位。元素的位置通过”top“、"bottom"、"left"、"right"来进行定位。

position的应用实例

1.relative属性值应用实例

首先,值得一提的是,一个设置position值为“relative”的元素其所占有的空间是不会改变的。

怎么说呢,我们简单地给出一个小测试:(代码如下)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }

		.div1{
			width:100px;
			height:100px;
			position:relative;
			background:blue;
			left:80px;
			top:80px;
		}

		.div2{
			width:100px;
			height:100px;
			background:red;
		}
	</style>
</head>
<body>
    <div class="div1"></div>

    <div class="div2"></div>    
</body>
</html>
结果如下:

假如我们对div1的偏移值设为零的话,其结果为:
那上面那句话就很好理解了,就是在对元素未做任何偏移设置的情况下,元素占有的空间不会改变,这就是为什么在设置偏移的情况下,div2上面看似一片空白下,不能挪向上方的原因。
现在,再思考一个问题,就是当我的div2设置为浮动时,到底是div1在div2上面,还是div2在div1上面,我们来试试:(之前是div1在div2上面)
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }

		.div1{
			width:100px;
			height:100px;
			position:relative;
			background:blue;
			left:80px;
			top:80px;
		}

		.div2{
			width:100px;
			height:100px;
			background:red;
			float:left;
		}
	</style>
</head>
<body>
    <div class="div1">div1</div>

    <div class="div2">div2</div>    
</body>
</html>
结果和上面没有设置浮动时一样的,这就要注意一下了,因为浮动元素一般会覆盖掉非浮动元素。
2.absolute属性值应用实例
这是个挺有意思的属性值,至于有趣在哪里我们先不讲。
首先,假如能够找到一个除static的父元素:
<!DOCTYPE html>
<html>
<head>
	<title>position-absolute相对点</title>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }
	    .main{
	    	width:1000px;
	    	height:200px;
	    	background:yellow;
	    }
		.top{
			width:1000px;
			height:500px;
			background:blue;
			position:relative;
		}
		.inside{
			width:400px;
			height:100px;
			background:red;
			position:absolute;
			left:100px;
			top:100px;
		}
	</style>
</head>
<body>
<div class="main"></div>
<div class="top">
	<div class="inside"></div>
</div>
</body>
</html>
结果如下:


另外一种情况,即不能找到一个除static的父元素:
<!DOCTYPE html>
<html>
<head>
	<title>position-absolute相对点</title>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }
	    .main{
	    	width:1000px;
	    	height:200px;
	    	background:yellow;
	    }
		.top{
			width:1000px;
			height:500px;
			background:blue;
		}
		.inside{
			width:400px;
			height:100px;
			background:red;
			position:absolute;
			left:100px;
			top:100px;
		}
	</style>
</head>
<body>
<div class="main"></div>
<div class="top">
	<div class="inside"></div>
</div>
</body>
</html>
结果如图:

这次,我们发现它相对根元素定位,即根元素成为了该元素的包含块。
现在,我们思考一个问题,如果我将上一个程序中的left属性与top属性的值都设为50%,那么这个50%是谁的50%(虽然我们一般不会这样去用,这样用也没有什么实际的意义)。以下,我给出程序:
<!DOCTYPE html>
<html>
<head>
	<title>position-absolute相对点</title>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }
	    .main{
	    	width:1000px;
	    	height:200px;
	    	background:yellow;
	    }
		.top{
			width:1000px;
			height:500px;
			background:blue;
		}
		.inside{
			width:400px;
			height:100px;
			background:red;
			position:absolute;
			left:100px;
			top:100px;
		    top:50%;
			left:50%;
			margin:-50px 0 0 -200px;
		}
	</style>
</head>
<body>
<div class="main">main</div>
<div class="top">
    top
	<div class="inside">inside</div>
</div>
</body>
</html>
结果如下:

结果是,元素"inside"在初始化窗口居中,当我们将窗口进行拉伸,该元素位置会变化,但始终位于该窗口中间。
但是,当我们移动滚动条时,它的位置不会发生变化,也就是说,其50%代表的就是初始窗口尺寸的50%。
另外,值得一提的是,与relative不同,absolute不会占有原来的空间。
3.fixed属性值应用实例
这个相对来说叫简单,就是纯粹的相对窗口定位。
比如说:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin:10px;
			padding:10px;
		}
		#main{
			width:1000px;
			height:500px;
			background:blue;
			position:relative;
		}
		#con{
			width:50px;
			height:50px;
			background:red;
			position:fixed;
			top:100px;
			left:100px;
		}
	</style>
	
</head>
<body>
    <div id="main">
    	<div id="con"></div>
    </div>
<!--     <script type="text/javascript" src="fixed.js"></script> -->
</body>
</html>
结果如图:

但无论你怎样移动滚动条,其相对窗口左上角的位置一直都不变。

这里总结的都是position基础概念用法规范,但其用法绝不仅如此,HTML5、css虽看起来简单易懂,但其门路决不仅如此,灵活运用它们将开启一个不一样的世界,这就是我目前所认识到的,绝不仅限于学习语法,还要灵活运用这些简单的语法达到不一样的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值