专栏首页cnblogs深入理解及应用Position

深入理解及应用Position

position俗称定位,主要取值及作用如下:

static

默认值。没有定位,出现在正常文档流中

absolute

绝对定位,相对于position为absolute、relative、fixed的第一个父元素进行定位

relative

相对定位,相对于其正常位置进行定位

fixed

绝对定位,相对于浏览器窗口进行定位

Position本不复杂,混淆应用比较难理解,主要规则如下:

脱离文档流

除 static属性值之外,其他值都会使元素脱离文档流(float也会导致元素脱离文档流)。

对 Width、height的影响

1) Absolute的参考点为最近可作为参考点的父元素(position为absolute、relative、fixed的元素)、fixed的参考点浏览器窗口、relative的参考点为元素正常位置。

2) 元素本身值为inherit时

a) 当父级元素的Width和height值为数值时,元素继承父级元素的完整高度,并以最近参考点作为参考。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 230px;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txtxtxt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

b) 当父级元素的Width和height值为百分比时,以参考点元素的宽、高* 百分比来计算。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

3) 元素本身为百分比时(50%)

此种情况下,无论父级元素的width和height是数值,还是百分比都不会造成对元素自身的影响,元素自身还是会以参考进行相应的计算。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: 100%;
            color: white;
        }
<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

定位后的默认位置

Fixed和absolute属性后的默认位置都是在原地,只是紧跟后面折正常文档流元素会顶上来,被定位元素盖住。

他与z-index无解的关系

z-index的详细介绍见后面章节,此处只指出position除static值外都会创建层叠上下文(z-index不为auto的时候)。

1) z-index为数值时,会创建层叠上下文,子元素层叠顺序以此做为参考。

2) z-index为auto时,不会创建层叠上下文,层叠顺序与z-index:0一致。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 双飞翼布局的改造 box-sizing和margin负值的应用

    box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 ? .content-size, .border-size{ ...

    sam dragon
  • Webpack多入口文件、热更新等体验

    Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验。 一、html-webpack-plugin 实现html模板文件的解析与生成 在plug...

    sam dragon
  • 简单实现 C# 与 Javascript的兼容

    本文章介绍下自己这刚实现的一个c#与js交互的插件。需求来源于一次与朋友的讨论。主要对话如下: 朋友:最近我想模拟一些数据,来测试我现在写的接口,但手工编写这些...

    sam dragon
  • 二分查找算法(下):通过 LeetCode 周赛学习二分查找算法

    之所以写这个,是因为我前两周在参加 LeetCode 周赛的时候,碰到了一个这样题,点击「阅读原文」可以直达题目链接,题目具体如下:

    与你一起学算法
  • 大数据技术之_16_Scala学习_06_面向对象编程-高级+隐式转换和隐式值

      设计一个 var total Int 表示总人数,我们在创建一个小孩时,就把 total 加1,并且 total 是所有对象共享的就 ok 了。我们使用伴生...

    黑泽君
  • .net mvc + layui做图片上传(一)

      图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块。关于这部分内容,本来功能不复杂,但后面做起来却还是出...

    CherishTheYouth
  • python flask web开发实战 bootstrap

    from flask.ext.bootstrap import Bootstrap

    用户5760343
  • webpack基础

    人生不如戏
  • bootstrap3 上中下页面布局

    用户5760343
  • 从零开始学C++之STL(二):实现简单容器模板类Vec(vector capacity 增长问题、allocator 内存分配器)

    首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下: template < class _Ty, cl...

    s1mba

扫码关注云+社区

领取腾讯云代金券