position_position encoding - CSDN
position 订阅
CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left属性则决定了该元素的最终位置。 展开全文
CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left属性则决定了该元素的最终位置。
信息
外文名
position
作    用
指定元素在文档中的定位方式
position版本
CSS2
position定位类型
大多数情况下,height和width被设定为auto的绝对定位元素,按其内容大小调整尺寸。但是,被绝对定位的元素可以通过指定top和bottom,保留height未指定(即auto),来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。除了刚刚描述的情况(绝对定位元素填充可用空间):
收起全文
精华内容
参与话题
  • POSITION定位有哪几种?各有什么特点?

    大家好,我是IT修真院武汉分院学员曾健,一枚正直纯洁善良的WEB程序员
    今天给大家分享一下,修真院官网前端任务4,深度思考中的知识点——position定位有哪几种?各有什么特点?


    1.背景介绍

    position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单,它允许你定义元素
    框相对于其正常位置应该
    出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
    常规取值:   1.static(静态)   2.Relative(相对)      3.Absolute(绝对)   4.fixed(固定)




    static(静态):HTML元素的默认值,不受top、bottom、left、right属性影响,元素出现在正常的文档
    流中




    Relative(相对):相对定位。
    特点:不脱离文档流的布局,受top、bottom、left、right属性影响,只改变自身的位置,在文档流原先的
    位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。




    Absolute(绝对):绝对定位
    特点:脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不
    为static),否则为html文档本身。




     fixed(固定):固定定位。
    特点:类似于absolute,但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。





    3.常见问题

    相对定位与绝对定位的搭配使用效果?



    4.解决方案

    父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左
    上角,若无非static祖先,以初始包含块定位,在浏览器里,根元素的包含块(HTML)为初始包含块,只是一般情
    况下看上去像是body区域。



    5.编码实战


    6.拓展思考

    fixed属性都有哪些应用?

    答:比如说淘宝首页的搜索框就是使用的fixed定位。

    7.参考文献

    position定位属性

    8.更多讨论

    1.relative和absolute有什么关系?

    答:首先是同源性


          relative和absolute是一种相煎的关系,relative对absolute有着诸多的限制


    2.relative和fixed有什么关系?

    答,首先也是同源性,再就是想限制却限制不了的关系,只能限制fixed的z-index层级


    3.relative的最小化影响原则是什么?

    有两点原则就是:

    1.尽量避免使用relative

    2.relative最小化

    第一点就是说尽量避免使用relative,absolute不依赖relative

    第二点就是说万不得已要使用relative时,尽量减小他的影响范围,比如说下图这个猪头,我们想

    把它定位到右上角


    传统的做法就是父级relative,子元素absolute,top:0,left:0.


    但是这样是很容易出现问题的,假如说不止一个relative,就有可能出现层级上或者说一些覆盖的问题,很麻烦。

    这时我们可以换一种做法,就是给要定位的元素单独套上一个div,把relative的影响最小化,如下图


    这就是relative的最小化影响原则

      技能树.IT修真院   
            “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

              这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。

                                             快来与我一起学习吧~http://www.jnshu.com/login/1/20654713



















    展开全文
  • 前端---HTML中position用法

    千次阅读 2018-09-24 20:51:39
    position的五个属性值: static  inherit fixed relative absolute 我们再以次介绍各个属性值的作用以及会产生的效果:  1.static   static属性为默认值,没有定位,元素出现在正常的流中(忽略 top, bot.....

    html页面布局中布局方法(position)分为相对布局(relative)和绝对布局(absolute)

     

    position的五个属性值:

    • static  
    • inherit
    • fixed
    • relative
    • absolute

    我们再以次介绍各个属性值的作用以及会产生的效果: 

    1.static 

     static属性为默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).

    2.inherit

    规定应该从父元素继承 position 属性的值.

    3.fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

    4.relative(着重介绍) 

    生成相对定位的元素,相对于其正常位置(即应当所在的位置)进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.

    • 假设一个容器中有sub1和sub2两个组件,当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。 对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。 随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变.如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移.

    5.absolute (着重介绍) 

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

    假设一个容器中有sub1和sub2两个组件,当设置sub1为的position为absolute后:

    • 当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。 注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,也就是忽略padding,当然并不会忽略margin和border。 接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始.
    • 如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解.

     

    展开全文
  • position的8种定位方式

    万次阅读 2018-09-18 15:31:52
    position定位的八种方式:  一、常见/用的四种 1.static positon定位的默认值,没有定位 2.relative 生成相对定位的元素,相对于其正常位置进行定位,一般在子元素设置absoute定位时,给父元素设置relative ...

    position定位的八种方式: 

    一、常见/用的四种

    1.static

    positon定位的默认值,没有定位

    2.relative

    生成相对定位的元素,相对于其正常位置进行定位,一般在子元素设置absoute定位时,给父元素设置relative

    元素的位置通过top、right、bottom、left  控制,其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

    3.absoute

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

    元素的位置通过top、right、bottom、left  控制,top、left的定位起点是包含块左上角,right、bottom的定位起点是包含块右下角

    4.fixed  (ie6不兼容)

    生成绝对定位的元素,相对于浏览器窗口进行定位,和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

    元素的位置通过top、right、bottom、left  控制,top、left的定位起点是包含块左上角,right、bottom的定位起点是包含块右下角

     

    二、不常用的四种 

    1.inherit

    规定应该从父元素继承 position 属性的值

    inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

    兼容:ie7及以下版本不支持此属性

    2.initial 

    设置positon的值为默认值(static)

    兼容:ie不支持此属性

    问:有了static为什么还会存在此属性,不是多此一举?

    答:initial 关键字可用于任何 HTML 元素上的任何 CSS 属性,不是postion特有的

    3.unset

    设置positon的值为不设置:

    如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承),该值等同于 inherit
    如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static),该值等同于 initial

    兼容:ie不支持此属性

    4.sticky

    css3新属性,它的表现就像position:relative和position:fixed的合体:

    1.在目标区域在屏幕中可见时,它的行为就像position:relative;

    2.页面滚动时

     当父元素是body时

       a.滚动距离小于屏幕高度或宽度,它会固定在目标位置

      

     

       b.滚动距离大于屏幕高度或宽度,它的表现就像position:relative和1一样

      

     

    当父元素不是body,在父元素高度内滚动时它会固定在目标位置,就像fixed

    在父元素滚动为不可视时它的表现就像position:relative和1一样

     

     兼容: ie不兼容、google不完全兼容(thead、tr标签不支持)、firefox59以后兼容,之前版本不完全兼容(table标签不支持)

     

    展开全文
  • 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

    2019-10-31 10:15:29
    当两个元素同时设置,position属性,后写的元素会覆盖先写的。 <!doctype html> 博客</ti...
  • position 属性规定元素的定位类型 1、position属性 说明 这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。 相对定位元素会相对于...
  • POSITION是MFC模板类库中经常使用的一个数据类型,我们从它的定义可以看出,其实,它就是一个指针。 // abstract iteration position struct __POSITION { }; typedef __POSITION* POSITION; MFC给出的注释是:...
  • HTML5高级之position(定位)

    万次阅读 2016-11-16 09:01:01
    position 属性规定元素的定位类型,定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。  ...
  • position:relative

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

    万次阅读 多人点赞 2018-07-14 10:24:20
    前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
  • position是世界坐标中的位置,可以理解为绝对坐标  localPosition是相对于父对象的位置,是相对坐标,我们在transform栏看到的是相对坐标  如果对象是一级对象,position和localPosition是相同的
  • MySql安装问题总是报错,按照提示把需要的Visual Studio 2013 安装上,还是报Visual Studio 2013错误,估计是Visual Studio的版本问题。 在网上找了vcredist_x64 重新安装,就可以正确安装了。...
  • 解决Unexpected token s in JSON at position 2

    万次阅读 2018-07-17 17:49:42
    js中字符串转json对象时报错: Uncaught SyntaxError: Unexpected token s in JSON at position 2   解决方法:http://www.yayihouse.com/yayishuwu/chapter/1331
  • transform.position坐标更改

    千次阅读 2017-07-29 22:46:27
    修改position的x值,直接修改transform.position = new Vector3(1,1,1); transform.position.x = 2;会报错。 因为position是一个结构体,那么transform.position返回的是一个值类型。 所以我们的更改是更改在一个...
  • echarts之tooltip-position

    万次阅读 2015-12-09 19:46:34
    效果 position Array|Function null 位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。...
  • Uncaught SyntaxError: Unexpected token < in JSON at position 0

    万次阅读 热门讨论 2017-01-08 18:35:28
    Uncaught SyntaxError: Unexpected token < in JSON at position 0
  • cg语言 SV_POSITION vs POSITION

    万次阅读 多人点赞 2015-07-08 01:58:30
    在unity3d的shader lab开发中无意间接触到了 SV_POSITION这个语义绑定(semantics binding) 之前学习的cg语言vertex shader或者fragment shader中输入输出语义绑定都是用的POSITION。 有疑惑必须刨根问底才安心,...
  • 很多人在学习Unity过程中,都遇到过对transform.position.x/y/z直接赋值时报错的情况。只能用一个Vector3对postion进行整体的赋值至于为什么会无法赋值,有一种很常见的说法:看起来好像很有道理,但是——异议あり...
  • 在使用python时经常会遇到一些编码的错误例如'gbk' codec can't decode byte 0xbe in position 18: illegal multibyte sequenc源代码片段为很明显从错误中我们可以指导,这是因为文本文档采用的是gbk编码,这个时候...
1 2 3 4 5 ... 20
收藏数 996,068
精华内容 398,427
关键字:

position