css position属性( static relative absolute fixed)

       position属性有4种不同类型的定位,分别是static、relative、absolute和fixed。

       static:元素正常生成,块级元素作为文档流的一部分,从上到下依次排列,行内元素对应生成一个或者多个行框。这是一种正常的情况,不再赘述。

        relative:元素的形状保持不变,位置会相对于其起点,做一定的偏移。

<html>
<head>
<style type="text/css">
h2.pos_relative
{
position:relative;
left:20px;
top:20px
}
</style>
</head>
<body>
<h2>正常位置的标题</h2>
<h2 class="pos_relative">这个标题相对于其正常位置向右移动20px,向下移动20px</h2>
</body>
</html>

"left:20px",元素的左侧相对于其原始位置增加20px;"top:20px",元素的顶部相对于其原始位置增加20px;

效果如下:

       absolute:元素的位置相对于最近的已定位的父元素进行定位,元素不占据文档流中的空间,可以覆盖界面上的其他元素,可以通过z-index属性来控制元素的显示次序。

<html>
<head>
<style type="text/css">
h2.pos_absolute
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>
<body>
<h2>这是正常的标题</h2>
<h2 class="pos_absolute">这是带有绝对定位的标题</h2>
</body>
</html>

"left:50px",元素的左侧相对于其父元素body增加50px;"top:50px",元素的顶部相对于其父元素body增加50px;

效果如下:

      fixed:元素的位置相对于其视窗进行定位,而不是相对于最近的已定位的父元素,这一点与absolute不同。

<html>
<head>
<style type="text/css">
h2.one
{
position:fixed;
left:20px;
top:10px;
}
h2.two
{
position:fixed;
top:30px;
right:50px;
}
</style>
</head>
<body>
<h2 class="one">相对于视窗左侧增加20px,相对于视窗顶部增加10px</h2>
<h2 class="two">相对于视窗右侧增加50px,相对于视窗顶部增加20px</h2>
</body>
</html>

效果如下:



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值