精华内容
下载资源
问答
  • CSS基础:浅谈position

    万次阅读 多人点赞 2021-02-23 10:52:36
    浅谈position 定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置—— MDN 一、文档流 什么是文档流? "文档流"是在...

    浅谈position

    定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置—— MDN

    一、文档流

    什么是文档流?

    "文档流"是在对布局进行任何更改之前,在页面上显示"块"和"内联"元素的方式。通常是从上至下,从左到右的形式。

    这个"流"本质上是一系列的事物,它们都在你的布局中一起工作,并且互相了解。 一旦某部分脱离了"流",它就会独立地工作

    还记得我们提到了盒模型(块级元素和行级元素),这些单个的元素是如何组合到一起的呢

    正常的布局流(在布局介绍文章中提到)是将元素放置在浏览器视口内的系统。默认情况下:

    • 块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。
    • 内联元素表现不一样——它们不会出现在新行上;相反,它们互相之间以及任何相邻(或被包裹)的文本内容位于同一行上,只要在父块级元素的宽度内有空间可以这样做。如果没有空间,那么溢流的文本或元素将向下移动到新行。

    如果两个相邻元素都在其上设置外边距,并且两个外边距接触,则两个外边距中的较大者保留,较小的一个消失——这叫外边距折叠(margin塌陷), 我们之前也提到过。

    让我们来看一个简单的例子来解析这一切:

    .box{
        border: 2px solid #1790FF;
        padding: 20px;
        width: 400px;
        height: 300px;
    }
    h2, h3, p{
        border: 1px solid blue;
    }
    span, a{
        background: rgb(185, 116, 116);
    }
    
    <div class="box">
        <h2>二级标题</h2>
        <h3>副标题</h3>
        <p>我是段落1</p>
        <p>我是段落2,我包含了有意思的标签<span>我是span标签</span>,除了span标签还有它——<a href="https://www.baidu.com">我是a标签</a>,你看他们都不会导致新起一行</p>
    </div>
    

    在这里插入图片描述
    在不影响他们布局方式的情况下,文档流就是默认的规则,从上至下,从左到右。

    二、定位(position)

    定位的整个想法是允许我们覆盖上面描述的基本文档流行为,以产生有趣的效果。

    有许多不同类型的定位,您可以对HTML元素生效。要使某个元素上的特定类型的定位,我们使用position属性。

    2.1 静态定位(static)

    静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

    为了演示这一点,还是刚才的例子,我们给h2标签添加静态定位

    <h2 class="positioned"> ... </h2>
    

    现在,将以下规则添加到CSS的底部:

    .positioned {
      position: static;
      background: #E6F7FF;
    }
    

    在这里插入图片描述

    除了背景色,根本没有差别~

    2.2 相对定位(relative)

    相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似,占据在正常的文档流中,除了你仍然可以修改它的最终位置,包括让它与页面上的其他元素重叠。 让我们将上一例子中的position: static; 替换成position: relative;

    在这里插入图片描述

    没有发生变化,这是因为relative,需要配合top, bottom, left, right 来精确指定要将定位元素移动到的位置。例如:

    .box {
        position: relative;
        border: 2px solid #1790FF;
        padding: 20px;
        width: 400px;
        height: 300px;
        background: #f5f5f5;
    }
    h2, h3, p {
        border: 1px solid blue;
    }
    span, a {
        background: rgb(185, 116, 116);
    }
    .positioned {
        position: relative;
        top: 30px;
        left: 40px;
        background: #E6F7FF;
    }
    .positioned::after{
    // 此为模拟样式
        content: '';
        position: absolute;
        top: -30px;
        left: -40px;
        width: 100%;
        height: 100%;
        border: 1px dashed #ccc;
    }
    
    <div class="box">
        <h2 class="positioned">二级标题</h2>
        <h3>副标题</h3>
        <p>我是段落1</p>
        <p>我是段落2,我包含了有意思的标签<span>我是span标签</span>,除了span标签还有它——<a href="https://www.baidu.com">我是a标签</a>,你看他们都不会导致新起一行
        </p>
    </div>
    

    在这里插入图片描述
    发现:

    • top和left属性分别起了作用,且参照物是元素原来的位置,即相对于自己在标准文档流中的位置进行移动的;
    • 其他元素仍然以为二级标题在原位置(看模拟的虚线)。也就是说相对定位并没有脱离标准文档流;

    结论:

    使用position: relative,不会让元素脱离文档流,目标元素会基于自己原本的位置进行定位

    2.3 绝对定位(absolute)

    绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下:

    .box {
        position: relative;
        border: 2px solid #1790FF;
        padding: 20px;
        width: 400px;
        height: 300px;
        background: #f5f5f5;
    }
    h2, h3, p {
        border: 1px solid blue;
    }
    span, a {
        background: rgb(185, 116, 116);
    }
    .positioned {
        position: absolute;
        top: 30px;
        left: 40px;
        background: #E6F7FF;
    }
    
    <div class="box">
        <h2 class="positioned">二级标题</h2>
        <h3>副标题</h3>
        <p>我是段落1</p>
        <p>我是段落2,我包含了有意思的标签<span>我是span标签</span>,除了span标签还有它——<a href="https://www.baidu.com">我是a标签</a>,你看他们都不会导致新起一行
        </p>
    </div>
    

    在这里插入图片描述
    发现:

    • 绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切;
    • 注意元素的位置已经改变——这是因为top,bottom,left和right以不同的方式在绝对定位;

    结论:

    position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

    2.4 固定定位(fixed)

    这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。

    *{
        margin: 0;
    }
    .box {
        position: relative;
        margin: 0 auto;
        border: 2px solid #1790FF;
        padding-top: 40px;
        width: 400px;
        height: 1500px;
        background: #f5f5f5;
    }
    .head{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 40px;
        color: #fff;
        background: #1790FF;
    }
    
    <div class="box">
        <div class="head">我是固定导航</div>
        我是内容
    </div>
    

    在这里插入图片描述
    发现:

    • 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身;
    • 不会受文档流动影响;

    2.5 粘性定位(sticky)

    *{
        margin: 0;
    }
    .box {
        position: relative;
        margin: 0 auto;
        border: 2px solid #1790FF;
        padding-top: 40px;
        width: 400px;
        height: 1500px;
        background: #f5f5f5;
    }
    .head{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 40px;
        color: #fff;
        background: #1790FF;
    }
    
    <div class="box">
        <div class="head">我是固定导航</div>
        我是内容
    </div>
    

    在这里插入图片描述
    发现:

    • 固定导航开始没有脱离文档流,当满足top:0,left:0的规则时,脱离了文档流

    结论:

    sticky允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶部起1​​0像素)为止,此后它就变得固定了。例如,它可用于使导航栏随页面滚动直到特定点,然后粘贴在页面顶部。

    三、z-index与定位

    我们在前文已经意识到了,一旦使用定位,就可能使元素重叠,有没有什么方法,可以控制哪一个元素在顶层(不被遮盖)呢?

    我们在定位上下文中只有一个定位的元素,它出现在顶部,因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢?

    我们先看下面一段代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                border: 1px solid red;
            }
            .div{
                /* position: absolute; */
                width: 100px;
                height: 100px;
            }
            .div:nth-child(1){
                background: chartreuse;
            }
            .div:nth-child(2){
                background: rgb(92, 153, 135);
            }
            .div:nth-child(3){
                background: rgb(194, 142, 84);
            }
            .div:nth-child(4){
                background: rgb(56, 41, 97);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
            <div class="div"></div>
        </div>
    </body>
    </html>
    

    四个元素从上至下排列,如果这样呢?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                position: relative;
                width: 300px;
                margin: 50px;
            }
            .div{
                position: absolute;
                width: 100px;
                height: 100px;
            }
            .div:nth-child(1){
                top: 0;
                left: 0;
                background: chartreuse;
            }
            .div:nth-child(2){
                background: rgb(92, 153, 135);
                top: 20px;
                left: 20px;
            }
            .div:nth-child(3){
                top: 40px;
                left: 40px;
                background: rgb(194, 142, 84);
            }
            .div:nth-child(4){
                top: 60px;
                left: 60px;
                background: rgb(56, 41, 97);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div">1</div>
            <div class="div">2</div>
            <div class="div">3</div>
            <div class="div">4</div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    我们通过调整z-index,可以让元素1、2、3、4的层叠顺序交换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                position: relative;
                width: 300px;
                margin: 50px;
            }
            .div{
                position: absolute;
                width: 100px;
                height: 100px;
            }
            .div:nth-child(1){
                z-index: 4;
                top: 0;
                left: 0;
                background: chartreuse;
            }
            .div:nth-child(2){
                z-index: 3;
                background: rgb(92, 153, 135);
                top: 20px;
                left: 20px;
            }
            .div:nth-child(3){
                z-index: 2;
                top: 40px;
                left: 40px;
                background: rgb(194, 142, 84);
            }
            .div:nth-child(4){
                z-index: 1;
                top: 60px;
                left: 60px;
                background: rgb(56, 41, 97);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div">1</div>
            <div class="div">2</div>
            <div class="div">3</div>
            <div class="div">4</div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    注意,这是z-index的效果,更多样式需要大家自己去探索哦~

    写在最后

    本文是《CSS基础系列》第三篇文章

    如果对你有所帮助不妨给本项目的github 点个 star,这是对我最大的鼓励!

    关于我

    • 花名:余光
    • WX:j565017805
    • 沉迷 JS,水平有限,虚心学习中

    其他沉淀

    展开全文
  • CSS中position详解

    千次阅读 多人点赞 2019-06-26 15:35:09
    一、position属性 position有5个值,分别为static,relative,absolute,fixed,sticky。 1.1 static static是position的默认属性,元素会按正常的文档流进行排序,不会受到top,bottom,left,right的影响。 ...

    一些关于定位和叠加的理解

    一、position属性

    position有5个值,分别为static,relative,absolute,fixed,sticky。

    1.1 static

    static是position的默认属性,元素会按正常的文档流进行排序,不会受到top,bottom,left,right的影响。

    1.2 relative

    relative相对定位的元素会较正常文档流中的位置进行偏移,受top,bottom,left,right的影响。就是元素还在文档流中像static一样占着位置,但视觉上会有偏移,多用于absolute绝对定位的父元素。

    1.3 absolute

    absolute绝对定位会脱离正常的文档流,相对于最近的进行过定位的(非static)父级元素定位,若没有父级元素进行过定位,则相对于即浏览器窗口定位。

    1.4 fixed

    fixed固定定位同样是脱离正常的文档流,一直相对于浏览器窗口定位,无论页面如何滚动,此元素总在屏幕的同一个位置。
    注:当fixed定位的父元素使用了transform的样式时,fixed定位会失效,变成和absolute一样的效果。

    1.5 sticky

    sticky粘性定位需要指定 top,right,bottom,left 四个阈值其中之一才会生效。
    阈值为此元素在可视区域中与边界的距离,跨越特定阈值前为相对定位(relative),当页面滚动导致此元素跨越阈值则变为固定定位(absolute)。
    注:此属性兼容性不是特别好,请根据业务场景进行选择。
    附兼容性传送门:https://caniuse.com/#search=sticky

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
       <div class="box">
           <div>title</div>
           <div class="stickyBar">stickyBar</div>
           <p>this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!</p>
       </div>
    </body>
    </html>
    <style>
        div.box{
            height: 2000px;
        }
        div.stickyBar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
            width: 200px;
        }
        div p {
            width: 200px;
        }
    </style>
    

    效果:
    在这里插入图片描述
    在这里插入图片描述

    二、元素叠加时的几种状态

    实际开发过程中免不了遇到元素的叠加问题,大都可以使用除static以外的定位方式(relative,absolute,fixed,sticky),配合z-index来控制叠加的展示方式(z-index只在position不为static时才生效)。
    注:父级加transform、opacity会使子元素的z-index失效,因为它们会创建新的stacking context,然后子元素原来设置的z-index会作用到这个新的stacking context上。
    以下是可能的几种情况:

    2.1

    同一级别的元素,定位方式相同且没有设置z-index,在html结构中靠后的元素在上面。
    注:同级别的static元素也可以叠加。常见的方法有把margin设为负数或使用transform。用transform的话,需要把两个元素都加上transform,这样在html结构中靠后的元素会在上面,否则加了transform的会展示在没加transform的元素上面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <p>divOne</p>
            <p>position: absolute;</p>
        </div>
        <div class="two">
            <p>divTwo</p>
            <p>position: absolute;</p>
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .one {
            position: absolute;
            background-color: red;
            top: 10px;
            left: 10px;
        }
        .two {
            position: absolute;
            background-color: blue;
            top: 100px;
            left: 100px;
        }
    </style>
    

    在这里插入图片描述

    2.2

    同一级别的元素使用了relative,absolute,fixed,sticky,那么z-index值大的元素在上面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <p>divOne</p>
            <p>position: relative;</p>
        </div>
        <div class="two">
            <p>divTwo</p>
            <p>position: absolute;</p>
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .one {
            position: relative;
            background-color: red;
            top: 10px;
            left: 10px;
            z-index: 99;
        }
        .two {
            position: absolute;
            background-color: blue;
            top: 50px;
            left: 100px;
            z-index: 1;
        }
    </style>
    

    在这里插入图片描述

    2.3

    同级别的元素,relative,absolute,fixed,sticky定位会在static上面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <p>absolute</p>
        </div>
        <div class="two">
            <p>static</p>
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .one {
            position: absolute;
            background-color: red;
            top: 0;
            left: 0;
        }
        .two {
            position: static;
            background-color: blue;
            margin: 100px 0 0 100px;
            padding-top: 100px;
        }
    </style>
    

    在这里插入图片描述

    2.4

    非同级别的使用了relative,absolute,fixed,sticky的元素,他们的叠加顺序是以非static的最上层的祖级元素的z-index进行比较的,没有非static的祖级则用自身进行比较,与此元素的子元素的z-index无关,再高都没用。
    文字描述不是很清晰,举几个例子:

    example1

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <p>absolute</p>
            <p>z-index:2</p>
            <div class="child">
                <p style="padding-left: 28px">absolute</p>
                <p style="padding-left: 28px">z-index:1</p>
            </div>
        </div>
        <div class="two">
            <p style="padding-left: 100px">absolute</p>
            <p style="padding-left: 100px">z-index:1</p>
            <div class="child">
                <p style="padding-left: 28px">absolute</p>
                <p style="padding-left: 28px">z-index:99</p>
            </div>
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        div .child {
            width: 100px;
            height: 100px;
            margin: 0 0 0 70px;
            position: relative;
            font-size: 14px;
        }
        .one {
            position: absolute;
            background-color: red;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .one .child {
            background-color: palevioletred;
            z-index: 1;
        }
        .two {
            position: absolute;
            background-color: blue;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
        .two .child {
            background-color: purple;
            z-index: 99;
        }
    </style>
    
    example2

    可以实现父元素在底下,子元素在上面的情况。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <p>static</p>
            <div class="child">
                <p style="padding-left: 28px">relative</p>
                <p style="padding-left: 28px">z-index:1</p>
            </div>
        </div>
        <div class="two">
            <p style="padding-left: 100px">static</p>
            <div class="child">
                <p style="padding-left: 28px">static</p>
            </div>
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        div .child {
            width: 100px;
            height: 100px;
            margin: 0 0 0 70px;
            font-size: 14px;
        }
        .one {
            position: static;
            background-color: red;
        }
        .one .child {
            position: relative;
            background-color: palevioletred;
            z-index: 1;
        }
        .two {
            position: static;
            background-color: blue;
            margin: -150px 0 0 75px;
        }
        .two .child {
            position: static;
            background-color: purple;
        }
    </style>
    
    example3

    稍微复杂一点的情况
    在这里插入图片描述

    2.5

    最后再来看一种被transform影响到的情况。

    父级红色未加transform

    在这里插入图片描述

    父级红色加了transform

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="one">
            <div class="oneChild"></div>
        </div>
        <div class="two">
    
        </div>
    </body>
    </html>
    <style>
        p {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .one {
            position: static;
            background-color: red;
            /*transform: translate(1px,1px);*/
        }
        .oneChild {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px 0 0 50px;
            position: relative;
            z-index: 2;
        }
        .two {
            position: absolute;
            background-color: blue;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
    </style>
    
    展开全文
  • HTML的position详解

    万次阅读 多人点赞 2018-08-23 19:52:11
    先对自己理解的position做一个总结, 1、static:static是所有元素的默认属性,也就是可以理解为正常的文档流 2、relative:relative是相对于自己文档的位置来定位的,对旁边的元素没有影响 3、absolute:absolute...

    今天上课半斤八两半斤八两的我突然不愿意听课,于是突然有了雅兴来解决自己这几天的疑惑。

    先对自己理解的position做一个总结,

    1、static:static是所有元素的默认属性,也就是可以理解为正常的文档流

    2、relative:relative是相对于自己文档的位置来定位的,对旁边的元素没有影响

    3、absolute:absolute是相对于父标签来进行定位的,如果没有父标签或者父标签是static,那么sorry,刚烈的absolute会相对于文档定位(不同于fixed相对于浏览器定位)

    4、fixed;牛逼的fixed,是相对于浏览器窗口来定位的。不会因为滚动条滚动,牛了一笔。(但是平常卵用不多,我自己的吐槽)

     

     

    原文来自:https://blog.csdn.net/FungLeo/article/details/50056111

    Css 详细解读定位属性 position 以及参数

    position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对position的各类使用是烂熟于心的。但是今天突然发现,居然很多人都不清楚position参数。因此,特地写这篇博文,详细解读一下position 以及参数。

    基础资料

    首先,我们可以到 W3SCHOOL 关于 position 的详细介绍 页面,来看一下position的资料。

    其参数主要有以下:

    absolute 
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
    fixed 
    生成绝对定位的元素,相对于浏览器窗口进行定位。 
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
    relative 
    生成相对定位的元素,相对于其正常位置进行定位。 
    因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。 
    static 
    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 
    inherit 
    规定应该从父元素继承 position 属性的值。

    static 默认值,就是没有定位,那就没必要多解释了。inherit 继承父元素,基本上这个参数用得相当少,所以也不做过多的解释。

    文档流布局的概念

    什么是文档流布局?我百度了一下相对严谨的解释:

    将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。  
    每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。 
    内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。  
    有三种情况将使得元素脱离文档流而存在,分别是 浮动绝对定位, 固定定位。 但是在IE6中浮动元素也存在于文档流中。

    关于浮动会脱离文档流,这里我就不解释了。因为我们一般会大力避免这种问题,而使用清除浮动的方法。上面引用的文字中,绝对定位 是指 position:absolute ,而 固定定位 是指 position:fixed

    正常文档流布局

    如上图所示,这就是正常的文档流布局。一个一个挨着的,到头了,另起一行,接着排布。

    理解文档流布局,是理解本文的基础,文档流布局也是css布局最基础的知识。这里就不详细赘述了。

    position:relative 相对定位

    什么是相对定位?相对什么定位?这是重要的问题。我的回答是——相对自己文档流中的原始位置定位。它的特点是——不会脱离文档流

    也就是说,使用position:relative定位,其元素依旧在文档流中,他的位置可以使用 leftrighttopbottomz-index等定位参数,但是,他的存在,还是会影响文档中紧跟在他周围的元素的。

    无论多少文字描述,可能都无法让你理解。下面,我们看一下实际效果。

    position:relative定位效果

    如上图的演示,我给test3加上了position:relative定位效果。代码如下:

    position: relative;left: -20px;top: 20px;
    • 1

    大家可以清晰的从图上看出来,test3根据CSS参数left: -20px;top: 20px;发生了位移。

    但是!但是!但是!重要的事情说三遍,它的唯一并没有对周围的元素有任何的影响!!它依然存在于文档流中。它的位移是根据它在文档流中的原始位置发生的!!这一点非常非常重要。

    通过上面的图片和阐释,我相信大家都对position:relative参数有了深刻的理解了。但这没完。下面我们还有关于它的内容。

    position:fixed 相对浏览器定位

    相比而言,这个参数是最好理解的。它相对于浏览器的窗口进行定位。同时——它会脱离文档流

    好,还是上图片。

    position:fixed相对浏览器定位效果一

    代码如下:

    position: fixed;right:20px;top: 20px;
    • 1

    这是初始状态,我们可以看到它的特点: 
    1. 它脱离了文档流,原来文档流中不存在它的位置,test4好像test3不存在一样的紧贴在了test2的后面。 
    2. 它的right:20px;top: 20px;参数是相对浏览器窗口定位的。

    好,我们再来看一下,当页面发生滚动的效果图。

    position:fixed相对浏览器定位效果二

    当页面发生了滚动,我们可以看到,页面的内容已经根据滚动条的位置发生了位移。但是我们的test3 依旧是在相对于浏览器的位置。

    通过上面的图文阐释,我相信,大家对于 position:fixed 参数已经有了深刻的理解了。

    其实position:fixed不难理解。

    position:absolute 绝对定位

    绝对定位是一个非常牛逼的属性,牛逼到,你不知道会发生什么。注意,它的解释是什么——“生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    也就是说,它可以相对于各种各样的东西进行定位。除了 static 其他都可以!!!注意!注意!注意! 是 除了 !

    也正是因为这一牛逼特性,导致很多人对此概念混乱。其实,这个一点也不混乱,我们可以将概念理顺了,分成几个情况来说。

    PS:position:absoluteposition:fixed一样是会脱离文档流的。这里就不解释脱离文档流的问题,主要研究它的定位问题。

    它的所有父元素的属性都是 position:static

    怎么理解这个标题?position:static 是所有html元素默认参数。就是说,这个元素的所有上级元素,你都没有使用过定位方式。

    我们通过如下代码模拟一个场景:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {font-size: 15px;color: #fff;}
            .test1 {width: 500px;height: 500px;background: #123;}
            .test2 {width: 400px;height: 400px;background: #234;}
            .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
        </style>
    </head>
    <body>
        <div class="test1">
            test1
            <div class="test2">
                test2
                <div class="test3">test3</div>
            </div>
        </div>
    </body>
    </html>

    如上,test3是test2的子元素,test1的孙元素。我们来看一下效果图:

    position:absolute效果一

    如上图所示。我们可以看到,test3既没有相对于父元素定位,也没有相对于爷元素定位。它居然和position:fixed一样!相对于浏览器定位了!!

    !!!这是一个错觉!!!

    我们来看一下浏览器发生滚动之后的效果,如下图所示:

    position:absolute效果2

    如上图所示,它并非是相对于浏览器定位,而是相对于文档定位。

    如果你有一点js基础的话,那么应该很容易理解。$(document)$(window)的差别(为了看得清楚,用了JQ写法)

    相对于文档,就是相对于整个页面来进行布局,而相对于窗口,则是相对于浏览器的可视区域进行定位,这二者有本质的区别的。

    这种情况在实际应用中有,但是不多。下面,我们再来看其他情况。

    它的父元素的属性是 position:relative

    上面,我们已经说过了,position:relative是相对于自身原始位置定位,其自身并没有脱离文档流。而它的子元素,使用position:absolute参数是什么效果呢?我们来做个试验。下面是代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {font-size: 15px;color: #fff;}
            .test1 {width: 500px;height: 500px;background: #123;}
            .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;}
            .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;}
        </style>
    </head>
    <body>
        <div class="test1">
            test1
            <div class="test2">
                test2
                <div class="test3">test3</div>
            </div>
        </div>
    </body>
    </html>

    我们给test2加上了position:relative属性,并给出了偏移值,然后,再给test3使用绝对定位,使用了为负数的偏移值,我们来看一下效果图,如下:

    position:absolute效果3

    从上图我们可以看到,test2如我们所愿的,相对于自身的位置发生了偏移,而test3则相对于test2发生了偏移。

    从这个试验我们可以看出,当一个元素设置了position:absolute属性之后,而它的父元素的属性为position:relative则,它不再是相对于文档定位,而是相对于父元素定位

    这一点非常重要。最最重要的是,父元素设置为position:relative并不会脱离文档流,也就是说——利用给父元素设置position:relative属性,再将子元素设置为position:absolute就可以在文档流中实现需要的定位

    这一点异常重要,也是非常常用的方法!(PS:基本上焦点图等常见应用,都是使用了这种方式)

    它的父元素的属性是 position:fixed

    上面,我们说了父元素为position:relative的情况,这种情况比较常见,那么它的父元素为 position:fixed 又是什么情况呢?如果你聪明的话,应该有了答案。我们来做一个试验,来印证一下你的想法。代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {font-size: 15px;color: #fff;}
            .test1 {width: 500px;height: 500px;background: #123;}
            .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;}
            .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;}
        </style>
    </head>
    <body>
        <div class="test1">
            test1
            <div class="test2">
                test2
                <div class="test3">test3</div>
            </div>
        </div>
    </body>
    </html>

    好,我们可以看到我给test2加上了position: fixed;right: 20px;top: 20px; 它会相对于浏览器窗口定位,而test3作为test2的子元素,我们加上了position: absolute;left: -40px;top: 40px;那么,根据我们的想象,它应该相对于test2作出偏移。那么是不是这个情况呢?我们来看一下效果图:

    position:absolute效果4

    如上图所示,看到了具体的效果了吧!是不是和你想象的是一样的呢?

    它的父元素的属性是 position:absolute

    好,我们来看一下,如果position:absolute嵌套position:absolute元素将会出现什么情况呢?

    写了这么多,其实你应该有了一定的预见性了吧?好,我们来做试验,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {font-size: 15px;color: #fff;}
            .test1 {width: 500px;height: 500px;background: #123;}
            .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
            .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
        </style>
    </head>
    <body>
        <div class="test1">
            test1
            <div class="test2">
                test2
                <div class="test3">test3</div>
            </div>
        </div>
    </body>
    </html>

    如上所示,test2我们使用了position: absolute;right: 20px;top: 20px;参数,那么,它会相对于文档作出设定的偏移值。而我们给test3使用了同样的css样式。如果test3也是相对于文档定位的话,那么它和test2应该是重叠的。

    但是,我们根据上面的解释,test3应该相对于test2定位才对,那么是不是呢?我们看效果图:

    position:absolute效果5

    如上图所示,果然,test2相对于文档偏移,而test3相对于test2偏移。

    position 以及参数总结

    1. position: relative;不会脱离文档流,position: fixed;position: absolute;会脱离文档流
    2. position: relative; 相对于自己在文档流中的初始位置偏移定位。
    3. position: fixed; 相对于浏览器窗口定位。
    4. position: absolute; 是相对于父级非position:static 浏览器定位。 
      1. 如果没有任何一个父级元素是非position:static属性,则会相对于文档定位。
      2. 这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
      3. 如果它的父级元素爷爷级元素都是非position:static 属性,则,它会选择距离最近的父元素。

    本文为 FungLeo by FengCMS 原创,转载,请无比保留此申明!

    展开全文
  • “如果用position来布局页面,父级元素的position属性必须为relative” 这一段经常在网上看到,一开始以为是官方标配,后面在学习的过程中有些疑问,故特意拿出来研究学习了下,发现并非如此,先说结论: 绝对定位...

    问题描述:

    “如果用position来布局页面,父级元素的position属性必须为relative”

    这一段经常在网上看到,一开始以为是官方标配,后面在学习的过程中有些疑问,故特意拿出来研究学习了下,发现并非如此,先说结论:

    绝对定位的父级节点只要是relative、fixed、absolute其中一个即可实现容器内相对布局,以下是找到的资料印证的。(特别说明,两个position:absolute会从当前文档流中删除,即都是浮层,可能会挡住后面的内容,这个要注意下)

    https://www.jianshu.com/p/d1e02e3abd11(第一部分,以下是引用内容)

     


    css position属性允许你定位一个元素,通过使用top,left,bottom,right属性,当然你必须先设定position的属性值,以便告诉浏览器依据什么方式进行定位。

    • static
      元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    • relative
      元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    • absolute
      元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
    • fixed
      元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    因为绝对定位(position:absolute)在实际应用中有着十分重要的地位,特别进行深度探究以便在使用中能更得心应手。
    元素设置position:absolute后主要会带来4个影响。

    1.脱离文档流,其在文档流中所占空间会被关闭。

    2.可相对与已被定位的父元素进行定位,逐级向上直到找到为止。

    3.生成一个块级框,不论原来它在正常流中生成何种类型的框。(其实就是形成bfc)。

    4.拥有z-index属性,可以进行层级设定,最大为2147483647。(等值按网页代码中层出现的顺序,后出现的层高于先出现的层)

    1、2、和4都好理解这里对2进行着重分析。
    因为定位可以是realitive、absolute和fixed。故父级元素会出现3中情况。
    1.父元素relative(√)。
    .parents{width: 200px;height:200px;position: relative;background: #f60;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     


    2.父元素fixed(√)
    .parents{width:200px;height:200px;position:fixed;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     

     


    3.父元素absolute(√)
    .parents{width:200px;height:200px;position:absolute;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     

    结论:relative、fixed、absolute表现效果一致,父容器只要定位position就有效。

    第二个问题top、right、bottom、left定位到最近一个具有定位设置父元素的边缘的距离。这个边缘指的是什么?
    因为盒子的margin 、border、padding、及content都会影响盒子的尺寸。在这里对父元素为relative的模型进行依次添加。
    1.添加margin:50px 0 0 50px;

     

    2.添加border-left: 50px solid #000;border-top: 50px solid #000;

     

    3添加padding:50px 0 0 50px;

    结论:定位所依据的父容器的边缘指的是padding+元素内容整体的边界。

    第三个问题left除了设置length具体尺寸,%相对于父容器的尺寸,默认会设置成auto,通过浏览器来计算位置。那么具体是怎么计算的呢。父元素为relative的模型进行探究。
    1.子元素top: auto;left: auto;

     

    2.父元素添加margin-left:50px;

    1.png

     

    3.父元素继续添加border-left:50px solid #000;

     

    4.父元素继续添加padding-left:50px;

     

    5.父元素继续添加padding-top:50px;

    结论:可以看出设置auto后,left等属性计算距离的边界变为content内容本身。

    展开全文
  • MFC中POSITION类详解

    千次阅读 2016-03-26 11:41:29
    POSITION用法解释 VC6.0 MFC中:POSITION用法解释 MFC中POSITION究竟是一个什么类型,CStringList类解释  关于MFC的POSITION 来源:POSITION用法解析 POSITION是MFC模板类库中经常使用的一个数据类型,我们从它的...
  • CSS 布局 position 详解

    千次阅读 多人点赞 2018-06-01 11:39:23
    CSS 布局 position 详解1.position 之 static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。实例:!DOCTYPE html&gt; &lt;html lang="en"&gt...
  • 详解position:sticky

    千次阅读 2020-02-14 10:29:21
    今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题 先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位,然后相对它的最近...
  • position之static

    千次阅读 2020-01-18 11:59:02
    position :static 静态定位/常规定位/自然定位 作用:使元素定位于常规流/自然流中 特点: 忽视top、bottom、left、right、z-index,是这些关键字作用失效 如果两个元素都设置了外边距,最终的外边距取...
  • POSITION是MFC模板类库中经常使用的一个数据类型,我们从它的定义可以看出,其实,它就是一个指针。 // abstract iteration position struct __POSITION { }; typedef __POSITION* POSITION; MFC给出的注释是:...
  • position:absolute这个是绝对定位; 是相对于浏览器的定位。 比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative是相对定位,是相...
  • position定位详解

    万次阅读 2019-08-10 11:41:05
    定位 position position的值 1.static 定位默认值,也就是没有定位,是文档流 2.relative 相对定位,顾名思义,相对自己进行定位,脱离文档流 3.absolute 绝对定位 4.fixed 固定定位 捆绑属性 left right top...
  • 详解background-position

    千次阅读 2018-05-02 21:26:57
    你真的了解background-positionbackground属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-attachment、background-position、...
  • position(五种属性,以及每个属性的特点)

    千次阅读 多人点赞 2019-10-28 15:34:08
    1. position: relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置) 3> 没有定位偏移...
  • css的position属性

    万次阅读 2018-08-11 11:49:02
     position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中. 1,第一个属性absolute,绝对定位 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left"...
  • position:relative

    万次阅读 2019-07-30 09:53:06
    1.当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于其父块来作为参照对象偏移定位,而不是相对于浏览器窗口,并且相对定位的块元素脱离标准流浮上来后,无论是否进行移动,其所占...
  • position:relative的用法

    千次阅读 2019-12-25 21:28:41
    position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了...
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...
  • Css 详细解读定位属性 position 以及参数

    万次阅读 多人点赞 2015-11-26 15:04:21
    Css 详细解读定位属性 position 以及参数position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对position的各类使用是烂熟于心的。...
  • Position与localPosition的区别

    千次阅读 2018-09-12 13:24:11
    position是根据世界原点为中心 2. localPosition是根据父节点为中心,如果没有父节点,localpositon和position是没有区别的 3.选中一个物体左上角Global和Local切换看物体世界坐标轴和本地坐标轴...
  • flex布局与position定位存在冲突

    千次阅读 2021-03-09 11:08:42
    情况:现在布局很多时候用到flex方式,有次我将flex布局后的元素B,然后给元素B添加position定位,发现元素B无法被子元素撑开 <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset=...
  • [CSS] position:absolute水平居中

    千次阅读 2019-11-09 16:08:00
    最近听了周杰伦的《不爱我就拉倒》,感觉周董现在写歌有点任性,反正我就是要这样写...言归正传,对于设置了position:absolute的元素怎么设置水平居中。 1 __ 最开始的时候一直用了比较蠢的方法,在元素外部套一层...
  • re.error: unknown extension ?<n at position 一个位置数字
  • position常见的几种属性

    千次阅读 2020-11-21 15:42:01
    1、static:默认值,在没有设置position属性的时候,position默认为static 在文档(页面)中占位置。 2、relative:相对定位。在使用top或者left进行位置移动的时候,参考的位置是自己原先(没有定位时)所在的位置...
  • position 属性的常用的5种取值

    千次阅读 2020-06-22 23:10:17
    position 属性 前言 说到 CSS 的 position 属性,大家都知道也都用过,但是要说它有几个取值以及这些值的不同,可能有部分同学会哑口无言,毕竟这不影响日常开发(手动狗头),身为一名有梦想的程序员,我们应该秉承...
  • 区别:定位为relative的元素脱离正常的文本...position各个属性值的定义: 1、static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。 2、relative:生成相对定位的元素...
  • position embedding学习

    千次阅读 2019-07-28 15:24:57
    Position Embedding本身是一个绝对位置的信息,但在语言中,相对位置也很重要,Google选择前述的位置向量公式的一个重要原因是:由于我们有sin(α+β)=sinαcosβ+cosαsinβsin⁡(α+β)=sin⁡αcos⁡β+cos⁡αsin...
  • Transformer的position embedding

    千次阅读 2020-05-07 16:31:51
    1. position embedding 位置编码 我们为什么要引入位置编呢?主有以下几个原因: 文本是时序型数据,词与词之间的顺序关系往往影响整个句子的含义。 transformer模型的self-attention层并没有包含位置信息,即一句...
  • 不要乱用position:fixed

    千次阅读 多人点赞 2020-02-18 21:38:39
    经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要正确使用相对定位和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,279,417
精华内容 511,766
关键字:

postion