CSS 几种定位方式的区别

论坛 期权论坛 脚本     
匿名网站用户   2020-12-20 13:41   96   0

static(静态定位)

  • 默认值,设置 top,right,bottom,left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。

relative(相对定位)

  • 元素相对自身偏移某个位置,元素扔保持其未定位的形状,它原本所占用的空间扔保留,可以通过 z-index 进行层次分级,子元素可相对该元素进行绝对定位;

absolute(绝对定位)

  • 元素从文档流完全删除(会脱离文档流), 相对于其最近的父级块元素(如果父级元素 position 为 static 时,absolute 元素将继续向上级查找,直到找到 body,以 body 坐标原点进行定位),元素原先在正常文档流中所占的空间会关闭,元素定位后生成一个块级框,可以通过 z-index 进行层次分级;

fixed(固定定位)

  • 它所相对固定的对象是可视窗口,与其他无关,可以通过z-index 进行层次分级。

  • 另外还有一个 float(浮动定位)

  • 这种定位方式很简单,只需要执行一个浮动的方向(例如: float: left;就表示这个元素向左边摆放),它的定位是 相对于父元素 容器;

注意: 如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素 ·清除浮动· (例如可以用 clear: both; 或者父元素添加 overflow: hidden 等方法)。在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放,这种定位也是会使元素 脱离文档流

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:1136255
帖子:227251
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP