网站首页 > 知识剖析 正文
一、static:默认值
不脱离文档流,top,right,bottom,left 等属性不生效。
二、绝对定位:absolute
绝对定位的关键是找对参照物,要成为绝对定位元素的参照物必须满足以下两个条件:
1.参照物和绝对定位元素必须是包含与被包含关系;
2.该参照物必须具有定位属性;
如果找不到满足以上两个条件的父包含块,那么相对于浏览器窗口进行定位。
注:设置了 属性后,元素会脱离正常文档流,不再占据空间;左右 margin为 auto 将会失效;我们通过left、top、bottom、right 来决定元素的位置。
三、相对定位:relative
参照物:元素偏移前位置
注:设置了相对定位,左右margin 为 auto 仍然有效、并且不会脱离文档流。
四、固定定位:fixed
参照物:浏览器窗口;
注:固定定位会脱离文档流;当绝对定位和固定定位参照物都是浏览器窗口时的区别: 当出现滚动条时,固定定位的元素不会跟随滚动条滚动,绝对定位会跟随滚动条滚动。
- 上一篇: 元素水平垂直居中? 元素水平垂直居中的方式
- 下一篇: CSS 中几种最常用的水平垂直居中的方法
猜你喜欢
- 2024-11-12 原来隐藏一个DOM元素可以有这么多种方式,最后一种你肯定不知道
- 2024-11-12 你知道什么是BFC么 你知道什么是bfc么英语
- 2024-11-12 为什么我写的z-index不生效? z index无效
- 2024-11-12 开发人员在编写 HTML 和 CSS 时最常犯的六大错误
- 2024-11-12 css中如何让div水平居中(上) 怎么让div水平居中
- 2024-11-12 CSS 12个趣味小技巧大公开 | 原力计划
- 2024-11-12 谈谈工作中常用的设计模式 工作设计模型
- 2024-11-12 CSS 父元素中的绝对定位 父元素设置相对定位
- 2024-11-12 菜鸟学习记:第二十五天 菜鸟学习记
- 2024-11-12 响应式网页中的高度设计,你认真的吗?
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)