HTML&CSS学习 CSS的三种基本定位机制 - MrLee博客 - 一个伪全桟工程师的小站

MrLee博客

落子无悔,人生无返

HTML&CSS学习 CSS的三种基本定位机制

**

CSS定位简介

**

1. CSS定位(position)属性允许自由设定元素的位置

2. 允许定位的元素框相对于正常位置或者相对于有定位的父元素,还可以是浏览器窗口。

3. CSS有三种基本定位机制:普通流浮动绝对定位


CSS position属性我们可以选择四种不同的类型定位


position:static 静止定位 元素默认状态


position:absolute 绝对定位 相对于最近的有定位的父元素进行定位

  1. 元素脱离文档流(原位置丢失)

  2. 默认压住没有定位的元素
  3. left top bottom right 进行位置调节 水平垂直设置一个方向即可
  4. 相对于有定位的父元素进行定位,如果没有父元素,往上查找,直到body

position:relative 相对定位 相对于自己原来位置进行定位

  1. 元素保留文档流的位置
  2. 默认压住没有定位的元素
  3. left top bottom right 进行位置调节 水平垂直设置一个方向即可
  4. 相对于自己原来的位置进行偏移

position:fixed 固定定位 相对于浏览器窗口进行定位

  1. 元素脱离文档流(原位置丢失)
  2. 默认压住没有定位的元素
  3. left top bottom right 进行位置调节 水平垂直设置一个方向即可

Z-index的使用特点

  1. 只针对有定位的元素(absolute/relative/fixed)
  2. 可改变元素的显示顺序
  3. 每一个定位都有一个默认值为0的z-index
  4. 定位元素的显示方式,根据结构生成方式,后面有定位的元素会压住前面有定位的元素

查看demo——URL飞机票
demo.PNG

本文共396字

评论卡