码迷,mamicode.com
首页 > Web开发 > 详细

css定位-position

时间:2020-04-08 10:01:08      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:格式   长度   窗口   CSS定位   val   height   文档流   round   z-index   

css定位

定位模式:在css中,position属性用于定义元素的定位模式,其基本语法格式如下:选择器{position:属性值;}

position属性值有5种,分别是静态定位,相对定位,绝对定位,固定定位和粘性定位

属性值 描述
static(静态定位) 正常显示,和不设置的效果一样
absolute(绝对定位) 以已定位父元素的位置为参照物,脱离文档流,不占据空间
relative(相对定位) 以自身默认的位置为参照物;不会破坏正常的布局流;占据空间
fixed(固定定位) 以浏览器的窗口为参照物;不论窗口滚动与否,元素都会留在那个位置
stick(粘性定位) 当元素在屏幕内,表现为relative;滚出显示器屏幕时,表现为fixed

偏移属性

定位模式仅仅定义了以哪种方式进行定位,并不能确定元素的具体位置,在css中,通过偏移属性来定义位置,其取值为数值或百分比。

偏移属性 描述
top 顶端偏移量,定义元素相对于其参照物的上边线的距离
bottom 底部偏移量,定义元素相对于其参照物的下边线的距离
left 左侧偏移量,定义元素相对于其参照物的左边线的距离
right 右侧偏移量,定义元素相对于其参照物的右边线的距离
注意: 在静态定位下,left,top属性不起作用

包含块

包含块是绝对定位的基础,包含块就是为定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;
定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;

定位元素的层次关系

z-index:value 默认value为auto
可以为负数,在没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上

元素在浏览器窗口居中的方法
让一个元素始终在窗口水平、垂直位置居中:
div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、
div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

锚点

命名锚点链接的应用:

命名锚点的作用:在同一页面内的不同位置进行跳转。
制作锚标记:
1)给元素定义命名锚记名
语法:<标记   id="命名锚记名">    </标记>

2)命名锚记连接
语法:<a href="#命名锚记名称"></a>

css定位-position

标签:格式   长度   窗口   CSS定位   val   height   文档流   round   z-index   

原文地址:https://www.cnblogs.com/cupid10/p/12657709.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!