定位元素

静态定位

代码:position:static;

注意点:

  1. 静态定位就是之前标准流,不能通过方位属性进行移动
  2. 之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定

相对定位

position: relative;

top: 30px;

right: 50px;

注意:

同事存在同方向的两个值得时候,left和top优先生效

给盒子增加position:relative;盒子不会脱标,依旧占有原来的位置

给盒子增加position:relative;这个盒子会以自身位置为准进行移动

特点:

  1. 需要配合方位属性实现移动
  2. 相对于自己原来位置进行移动
  3. 在页面中占位置 → 没有脱标应用场景:配合绝对定位组 CP (子绝父相)用于小范围的移动
定位元素插图

定位元素插图1

绝对定位

position: absolute;

特点:

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置 → 已经脱标 应用场景:
  4. 配合绝对定位组 CP (子绝父相)
定位元素插图2

定位元素插图3

子绝父相

定位元素插图4
定位元素插图5

场景:让子元素相对于父元素进行自由移动

含义: • 子元素:绝对定位 • 父元素:相对定位 Ø

绝父相好处: • 父元素是相对定位,则对网页布局影响最小

注意:

每次记得给父级盒子给相对定位,否则子集盒子将会按照浏览器窗口大小进行定位

© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发

请登录后发表评论