css定位之position属性的用法笔记

原创 PHP笔记  2017-03-28 18:11  阅读 1,537 views 次

常用定位

  • static:默认值,没有定位。
  • relative:相对定位,元素偏移指定距离,元素形状不变,占有的空间保留。
  • absolute:绝对定位,相对于static定位以外的第一个父元素进行定位。
  • fixed:固定定位,相对于浏览器窗口进行定位。

元素控制属性:

  • left:属性值为正,向右偏
  • top:属性值为正,向下偏
  • right:属性值为正,向左偏
  • bottom:属性值为正,向上偏

1、相对定位(relative)

relative属性值设定元素为相对定位,元素偏移指定距离,原占有的空间还保留。

实例:

......
<body>
<style type="text/css">
div{width:100px;height:50px;float:left;border:1px solid red;margin:5px;}
#b{position:relative;left:20px;top:80px;}
</style>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
</body>
......

运行结果:

 

2、绝对定位(absolute)

absolute属性值设定元素为绝对定位,相对于 static 定位以外的第一个父元素进行定位,原占有的空间被删除。

实例1:

......
<body>
<style type="text/css">
div{width:100px;height:50px;float:left;border:1px solid red;margin:5px;}
#b{position:absolute;left:50px;top:100px;}
</style>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
</body>
......

运行结果:

实例2:

......
<body>
<style type="text/css">
div{width:70px;height:50px;float:left;border:1px solid red;margin:5px;}
#b{position:relative;left:50px;top:80px;width:200px;height:100px;}
#b1{position:absolute;left:20px;top:30px;}
</style>
<div id="a">1</div>
<div id="b">
<div id="b1">2</div>
</div>
</body>
......

运行结果:

 

3、固定定位(fixed)

fixed属性值设定元素为固定定位,相对于浏览器窗口进行定位。

实例:

......
<body>
<style type="text/css">
div{width:150px;height:50px;float:left;border:1px solid red;margin:5px;}
#b{position:fixed;left:50px;top:80px;}
</style>
<div id="a">1</div>
<div id="b">2</div>
</body>
......

运行结果:

本文地址:https://www.ggbiji.com/css-position.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情