前端复习--css position属性
来源:互联网 发布:软件测试项目实例 编辑:程序博客网 时间:2024/06/17 16:36
1.position的absolute与fixed共同点与不同点
相同点:(1)改变行内元素的呈现方式,display被置为block。(2)都脱离了文档流,不占据空间(3)默认会覆盖到文档流的上方
不同点:(1)absolute相对于定位了的父元素,fixed相对于浏览器窗口定位,滚动页面,元素相对于浏览器窗口的位置不变
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static;
is not positioned in any special way; it is always positioned according to the normal flow of the page:
position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;">A <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1 <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2 </div> </div></div>
1)元素同时应用了position: relative、float、(top / left / bottom / right)属性后,则元素先浮动到相应的位置,然后再根据(top / left / bottom / right)所设置的距离来发生偏移。
position:absolute; 与float属性一样都会脱离文档流,这就带来一个相同效果;它们的包含元素的高度会坍塌为0;对于float属性可以清除浮动;
同时应用position: absolute和float: left会导致清除浮动无效(position: relative则可以清除浮动)。
position:absolute 还有坑没有踩平!!!!
如果绝对定位元素没有申明置入值,只申明了position:absolute,那么其自身定位以及margin的参照物即为其最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的 内容框。
如果同时申明了置入值和margin值呢?看如下代码:
<div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>
你会发现元素本身距其包含块(这里是body,跟LZ DEMO一个性质)的距离是margin-left+left=300px 。
- 前端复习--css position属性
- 【复习】css中的position
- css 复习-position定位
- 前端css position
- web前端css--position
- CSS position 属性
- CSS background-position 属性
- CSS定位属性Position
- css 之 position属性
- CSS position属性
- css position属性
- css中的position属性
- CSS position 属性
- CSS的position属性
- CSS position 属性
- CSS position 属性用法
- CSS之Position属性
- CSS background-position 属性
- 杂谈:996有点可笑
- Hololens入门之手势识别(使用Manipulation gesture控制物体平移)
- MySQL忘记密码的正确解决方法
- C++ Primer读书笔记——第3章-字符串、向量和数组(上)
- 解决mac vim cscope快捷键映射无效问题
- 前端复习--css position属性
- Spark RDD特征与宽窄依赖
- poj 2104 K-th Number
- mac 上安装brew,permission denied(已解决)
- C++Primer练习与答案——3.1节
- UML统一建模语言
- 输出重定向执行顺序
- 小机房服务器最后的战役 - 战前动员
- 一切成功源于积累——20160903 美国非农15分钟k线直至收盘 各货币对表现 数据复杂 欧美先涨后跌