定位-绝对定位

番茄西红柿发布于2019-04-23 13:23 / 2772人阅读

摘要：定位元素输出开启绝对定位，会使元素脱离文档流开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化相对于浏览器窗口进行定位开启的定位并把作为的子元素输出若有祖先元素开启了定位一般情况，开启了子元素的绝对定位

　　输出：

　　1.开启绝对定位，会使元素脱离文档流；

　　2、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化；

　　3、相对于浏览器窗口进行定位；

开启box3的定位并把box2作为box3的子元素：

  .box2{
            width:100px;
            height: 100px;
            background-color: rgb(231, 223, 143);
            position: absolute;
            left: 100px;
            top:  100px;
      }
      .box3{
        width:100px;
        height: 100px;
        background-color: rgb(188, 211, 213);
        position: absolute;
      }

输出：

若有祖先元素开启了定位（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）；

绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的；

绝对定位会使元素提高一个层级；

改变元素的性质（块联元素变为内联元素）；

服务器托管混合云相对定位-绝对定位绝对定位绝对定位布局中的绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1814.html

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
CSS相对定位和绝对定位

摘要：三绝对定位拼爹型绝对定位不占有位置。父级有定位绝对定位是将元素依据最近的已经定位绝对固定或相对的父元素祖先进行定位。绝对定位的盒子水平垂直居中普通盒子左右居中用即可，但对于绝对定位的就无效了。为什么要学定位定位是CSS中的难点和重点，特别是后面学javascript特效时候，比如实现下拉菜单、弹框等，要盖住下面内容又不会影响下面内容，比如要超出盒子一部分，比如屏幕中有一个小弹窗飘来...

xinhaip 2019-08-30 15:54 评论0 收藏0
web前端（12）—— 页面布局2

摘要：是以首屏页面左下角为参考点来调整位置。因为绝对定位脱离标准流，影响页面的布局。相反父相子绝在我们页面布局中，是常用的布局方案。本篇博文，主要就讲定位的问题，也就是页面布局里最重要的，本篇博文不出意外的话，也是css的最后一篇博文了定位，position属性定位有三种：相对定位绝对定位固定定位相对定位，position：relative 相对定位的意思就是相对于自身元素原来...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0
前端技术之_CSS详解第六天--完结

前端技术之_CSS详解第六天--完结一、复习第五天的知识 a标签的伪类4个：　　a:link 没有被点击过的链接　　a:visited 访问过的链接　　a:hover 悬停　　a:active 按下鼠标不松手顺序就是“love hate”准则。可以简写： 1 a{ 3 } 4 a:hover{ 6 } background系列属性，CSS2.1层面 ...

番茄西红柿 2019-04-23 13:44 评论0 收藏0