精华内容
下载资源
问答
  • position定位

    千次阅读 2013-01-10 11:11:18
    定位(position)布局页面说容易非常容易,只需要记住这节课最后一句话就可以了,说困难,那是相当的难理解,需要一定的耐心,不过还好,KwooJan给大家总结的已经很通俗易懂了。 如果下面的文字实在是无法理解透,...
    定位(position)布局页面说容易非常容易,只需要记住这节课最后一句话就可以了,说困难,那是相当的难理解,需要一定的耐心,不过还好,KwooJan给大家总结的已经很通俗易懂了。
    

    如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话“ 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。

    好,上课!
    任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。

    【position:absolute】
    意思是:他的意思是 绝对定位,他默认参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,有以下属性:

    1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面
    的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。
    2)如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
    3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由TRBL决定。即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根本没有影响。

    以上三点可以总结出,若想把一个定位属性为absolute的元素定位于其父级元素内,只有满足两个条件,
    第一:设定TRBL
    第二:父级设定Position属性

    上面的这个总结非常重要,可以保证你在用absolue布局页面的时候,不会错位,并且随着浏览器的大小或者显示器分辨率的大小,而不发生改变。

    只要有一点不满足,元素就会以浏览器左上角为原点,这就是初学者容易犯错的一点,已经定位好的板块,当浏览器的大小改变,父级元素会随之改变,但是设定Position属性为absolute的板块和父级元素的位置发生改变,错位了,这就是因为此时元素以浏览器的右上角为原点的原因。

    初学者很容易犯错的是,不清楚Position属性为absolute的板块,若想定位到父级板块中,并且当浏览器的大小改变或显示器的分辨率改变,布局不发生改变,是需要满足两个条件的,只要有一点不满足,元素就会以浏览器左上角为原点,从而导致页面布局错位。

    【position:relative】
    意思是 相对定位,他是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位,有以下属性:

    1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角(到这里和absolute第一条一样),如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。
    2)如果设定TRBL,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位(和absolut不同)
    3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位(后半段和absolut不同)。

    以上三点可以总结出,无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。
    综合上面对relative的叙述,我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV,或者说只要将我们平时
    布局页面的div的CSS属性中加上position:relative后,就不只是用float布局页面了,还可以用TRBL进行布局页面了,或者说加上
    position:relative的DIV也可以像普通的DIV进行布局页面了,只不过还可以用TRBL进行布局页面。但是position属性为absolute不可以
    用来布局页面,因为如果用来布局的话,所有的DIV都相对于浏览器的左上角定位了,所以只能用于将某个元素定位于属性为absolute的
    元素的内部某个位置,这样我们就可以总结比较重要的结论

    属性为relative的元素可以用来布局页面,属性为absolute的元素用来定位某元素在父级中的位置

    既然属性为absolute的元素用来定位某元素在父级中位置,就少不了TRBL,这时候根据一开始讲的absolute的第三条,如果父级元素没有
    position属性那么absolute元素就会脱离父级元素,但是如果是布局页面,父级元素position的属性又不能为absolute,不然就会以浏览
    器左上角为原点了,所以父级元素的position属性只能为relative!
    =============================================
    总结:如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因 为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。
    =============================================
    展开全文
  • 帮助大家全面剖析了CSS Position定位,CSS Position前端必学必会的内容,感兴趣的小伙伴们可以参考一下
  • css position 定位

    2021-01-19 18:24:27
    如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话“如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的...
  • 主要介绍了通过position定位实现div底端对齐,感兴趣的朋友可以参考下
  • 文章目录一、float浮动二、position定位 今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。 一、float浮动 1、文档流 指的是元素排版布局过程中,元素...
  • position定位详解

    2018-01-23 17:58:00
    position定位详解 1、position的属性值: static fixed relative absolute 2、属性值详解 (1)static 默认值 (2)fixed 固定定位 相对于浏览器窗口是固定位置,无论滚动条如何滚动,其位置不会改变...
    position定位详解
    1、position的属性值:
    static
    fixed
    relative

    absolute


    2、属性值详解
    (1)static   默认值
    (2)fixed    固定定位
    相对于浏览器窗口是固定位置,无论滚动条如何滚动,其位置不会改变。(大多数广告是这样做的)。
    定义position为fixed后,可通过top、left、bottom、right来改变其位置。通常仅用top和left即可完成定位。
    (3)relative  相对定位
    可通过top、left、bottom、right来改变其位置。
    相对定位相对的位置是自己原来的位置。即定位原点为该元素本身所在的位置。进行相对定位后,该元素仍然占有原来的位置。
    (4)absolute   绝对定位
    可通过top、left、bottom、right来改变其位置。

    定位原点是离自己元素最近一级并且position属性为relative或者absolute的父级元素,如果没有则相对于浏览器定位。和relative属性不同的是,进行绝对定位后,元素不会继续占有原来的位置。


    3、relative、absolute、fixed属性都可通过z-index进行层次分级。z-index值大的在上方,值小的在下方。此属性适用于同辈元素,而对于父元素和子元素不适用。


    4、注意:
    使用fixed、relative、absolute属性后,该元素会脱离原来的层级关系,会处于原来层级的上方。因此使用这些属性后可能回覆盖页面上其他元素。

    展开全文
  • 子元素position 定位 百分比问题 基准 父元素是否定位

    一 ,position定位基准问题这里就不在赘述,子元素定位是以其整体

    (margin+border+padding+width height)整体外边界为基准相对于设置了除static定位的其他定

    位的父元素的width height +padding(也就是border内边界为基准进行定位的),不包括父元素的

    详情参见http://blog.csdn.net/qq_35809245/article/details/53637512

    二 以下谈谈我的拙见 :
    1 第一种情况,

    如果子元素设置了定位 position:absolute*但是不设置left top 等

    *,好的,典型的挣了钱不花全部上缴型的,设置了定位的属性,却不进行位置的确定,那么该
    子元素只能随波逐流,依旧受到父元素设置 padding 子元素本身设置 margin 等的挤压,

    直接撸代码,很黄很暴力,说的再多不如代码来的直接

        <style>
        .box {
            width: 1000px;
            height: 500px;
            background-color: pink;
            overflow: hidden;
            position: relative;
            /*这行代码解决垂直外边距塌陷问题*/
        }
        .one {
            width: 500px;
            height: 200px;
            border: 10px solid black;
            background-color: green;
            position: relative;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: absolute;
            border: 10px solid red;
        }
    </style>
    </head>
    <body>
    <div class="box">
        <div class="one">
            <div class="two"></div>
        </div>
    </div>
    </body>
    

    这里写图片描述
    变形一:
    父元素padding影响子元素位置

        .one {
            width: 500px;
            height: 200px;
            border: 10px solid black;
            /*增加这一行代码*/
            padding: 100px; 
            background-color: green;
            position: relative;
        }
    

    这里写图片描述
    变形二
    子元素margin影响子元素本身位置

    .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: absolute;
            margin: 100px;
            border: 10px solid red;
        }
    

    这里写图片描述

    总结:其实,如果子元素设置了定位元素,但是没有设置left top 等值,那么就相当于定位仅仅是将其从标准流脱标了,对于margin和padding对其的位置影响,可以理解为,其实子元素没有脱标,然后对着标准流说:“你咬我啊,我还在标准流里面”!
    变形三 :如果不给子元素设置定位 position:absolute ,效果在变形一和变形二的条件下效果是一样的

            .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            /*position: absolute;*/
            /*注释掉定位代码*/
            margin: 100px;
            border: 10px solid red;
        }
    

    2 第二种情况,子元素设置了定位 position:absolute也设置了 left top 的值,定位基准是有除了static定位之外的其他定位的父元素,此时不再多说。

    left top 的值表示子元素相对于父元素内边界的左边和上边的距离,下面主要理解以百分比形式出现的left top 值

    水平方向的left right 值等于 (除了static 定位的以外的其他定位)父元素的 宽度 width*百分比
    垂直方向 的top bottom值等于 (除了static 定位的以外的其他定位)父元素的 高度 height*百分比

    为了方便看图,还是以上面的代码作为栗子,但是去掉了padding和margin的设置

                <style>
                .box {
                    width: 1000px;
                    height: 500px;
                    background-color: pink;
                    overflow: hidden;
                    position: relative;
                    /*这行代码解决垂直外边距塌陷问题*/
                }
                .one {
                    width: 500px;
                    height: 200px;
                    border: 10px solid black;
                    background-color: green;
                    position: relative;
                }
                .two {
                    width: 100px;
                    height: 100px;
                    background-color:yellow;
                    position: absolute;
                    left: 10%;
                    /*此时left取值是  left = 500*10% = 50px */
                    top:10%;
                    /*此时top取值是  top = 200*10% = 20px */
                    border: 10px solid red;
                }
            </style>
            </head>
            <body>
            <div class="box">
                <div class="one">
                    <div class="two"></div>
                </div>
            </div>
            </body>
    

    这里写图片描述

    如果注释掉第一个父元素的position

        .one {
                width: 500px;
                height: 200px;
                border: 10px solid black;
                background-color: green;
                /*position: relative;*/
            }
    

    这里写图片描述

    此时定位的数值left top 是相对于 box 的宽高 为基准计算的百分比的值

        .two {
                width: 100px;
                height: 100px;
                background-color:yellow;
                position: absolute;
                left: 10%;
                /*此时left取值是  left = 800*10% = 80px */
                top:10%;
                /*此时top取值是  top = 500*10% = 50px */
                border: 10px solid red;
            }
    

    三 同时大家注意对比记忆背景图片的background-position 详情参阅,对比记忆理解更加深刻。
    http://blog.csdn.net/qq_35809245/article/details/54176679

    四,英雄所见略同的啊,鑫神写的可能更好,大家可以参阅这栗个http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/

    五 撸代码上瘾,又12点半了,我要睡觉了,不要太想我。如果觉得有用,右边可以打赏个五毛?(纯洁的微笑,我喜欢分享)

    展开全文
  • 本文详细介绍了CSS中position定位和float浮动的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要总结了CSS的position定位属性在使用的一些重点,包括对绝对定位和相对定位等的强调,需要的朋友可以参考下
  • 下面小编就为大家带来一篇老生常谈position定位——让人又爱又恨的属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • position 定位相互覆盖的问题

    千次阅读 2017-04-18 17:26:35
    position 定位相互覆盖的问题

    position 定位相互覆盖的问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>定位层的相互覆盖问题</title>
    </head>
    <style>
    .red,.blue,.green{ width: 200px; height: 200px; }
    .red { background-color: red; }
    .blue { background-color: blue; position: relative; top: -100px; z-index: 3;}
    .green { background-color: green; position: relative; top: -200px; z-index: 2;}
    .left,.right{width:20px; height: 20px; background-color: white;}
    .left {  position: absolute; top: 0px;left: 0px; z-index: 99;}
    .right {  position: absolute; top: 0px;right: 0px; z-index: 9999;}
    </style>
    <body>
    	<div class="red">这是一个没有定位的块</div>
    	<div class="blue">这个块是根据其正常位置向上移动<div class="left"></div></div>
    	<div class="green">这个块是根据其正常位置向上移动<div class="right"></div></div>
    </body>
    </html>
    

    这里写图片描述

    定位覆盖的优先级还是先取决于父辈元素的z-index的大小(拼爹),然后才是自己的z-index的大小。
    另外,
    相对定位relative元素的定位是相对其正常位置进行移位,不脱离文档流,它原本所占的空间不会改变;
    绝对定位absolute元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于body,absolute定位使元素的位置与文档流无关,因此不占据空间。

    展开全文
  • 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定位和flex布局分析

    万次阅读 2018-06-14 12:42:56
    position定位 fixed绝对定位 fixed 生成绝对定位的元素,相对于浏览器窗口(或手机等终端窗口)进行定位。元素的位置通过&amp;amp;amp;amp;amp;amp;quot;left&amp;amp;amp;amp;amp;amp;quot;, &amp;...
  • RN position定位及Android兼容处理

    千次阅读 2018-11-30 15:12:59
    RN官方也提供了定位布局,flexbox定位和position定位可以同时使用,同时生效; position RN提供了两种布局方式:absolute和relative relative 相对于 上一个兄弟节点 不可以浮动(尽管偏移了,还是占了一个位置) ...
  • HTML5之position定位

    千次阅读 2019-04-17 20:23:52
    position 属性规定元素的定位类型,定义建立元素布局所用的定位机制。任何元素都可以定位,绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移...
  • position属性有4个值: 默认是static,无特殊定位,对象遵循HTML定位规则(一般使用margin、padding) fixed未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 absolute绝对定位(相对于最近的父元素...
  • Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。 主要的值 ①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion...
  • 【CSS】Position 定位

    千次阅读 2019-02-26 15:45:04
    那么如何实现页面的堆积,就需要CSS中position定位属性了。 position 属性指定了元素的定位类型,共有五个值,分别是 static relative fixed absolute sticky 点击上述五个值可直接跳转到菜鸟教程的CSS ...
  • 我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。都是绝对定位,二者有一致性,也有不同点。那么二者的区别是什么呢?那就是position的fixed值定位的元素会固定在原来的位置不变...
  • POSITION定位有哪几种?各有什么特点?
  • 一.position定位(relative | absolute | fixed | static) 1.position: static; position 的默认值,元素没有设置定位时的原有默认值。 2.position: relative; 相对定位 (1)相对元素的当前自身位子...
  •  position 定位position 属性规定元素的定位类型属性:1. absolute 根据父级元素进行定位2. fixed 根据浏览器位置定位3. relative 根据自身来定位4. static 代表没有定位参考网址:...
  • 最全position定位方式解析

    千次阅读 2018-06-08 12:06:55
    position: 定位方式position: static; position: relative; position: absolute; position: fixed; position: inherit; position: initial; position: unset; position: sticky;通常,我们总是知道前面4种方式,...
  • position定位有哪几种?各有什么特点 】 一、背景介绍 position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 193,863
精华内容 77,545
关键字:

position定位