精华内容
下载资源
问答
  • 子元素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点半了,我要睡觉了,不要太想我。如果觉得有用,右边可以打赏个五毛?(纯洁的微笑,我喜欢分享)

    展开全文
  • top、left、right、bottom设置百分比基于父元素! 首先定位之后,left、top、right、bottom 设置百分比的情况是 因为在不同设备下,定位的元素宽高也是不同的,那么这个时候给出固定值显然是不对的。所以用到了百分比...

    top、left、right、bottom设置百分比基于父元素!

    首先定位之后,left、top、right、bottom 设置百分比的情况是
    因为在不同设备下,定位的元素宽高也是不同的,那么这个时候给出固定值显然是不对的。所以用到了百分比

    translate’的百分比参照自身
    遇到这个问题的时候,是因为我想把这个元素定位居中,可是我要居中的元素没有宽高,是内容撑起来的,那么我无法设置margin值来让他偏移!translate的作用派上了用场!在我设置top、left为50%的时候,设置translate(-50%, -50%),因为它基于自身宽高度,这样不用计算他的宽高啦

    展开全文
  • width:x%用百分比设定元素的宽度,一般情况是指参考父元素的宽度。 但是当position是fixed或absolute时,百分比是参考屏幕的宽度。left:x%等位置属性的百分比也是参考屏幕的宽度。
  • 这是MDN官网对background-position属性的解释,而且有它的计算原理,感兴趣的自己去查。解决方案就是容器和图片的大小不要一样大就可以了。

    在这里插入图片描述
    这是MDN官网对background-position属性的解释,而且有它的计算原理,感兴趣的自己去查。解决方案就是容器和图片的大小不要一样大就可以了。

    展开全文
  • 设置了定位position: absolute的盒子,将top设为0%,盒子顶部将会紧挨着父元素(已定位)的顶部,若设为100%,则盒子顶部将会紧挨着父元素底部。 计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子...

    设置了定位position: absolute的盒子,将top设为0%,盒子顶部将会紧挨着父元素(已定位)的顶部,若设为100%,则盒子顶部将会紧挨着父元素底部。
    计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度

    由此可以理解:

    .element {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;/*盒子宽度的一半*/
        margin-top: -50px;/*盒子高度的一半*/
    }
    

    这个代码为什么可以实现子元素在父元素中的绝对居中,但是该方法需要提前知道元素的尺寸,耦合性太强。

    有个绝对定位居中更好的办法:

    .element {
        width: 200px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;/*这行代码是关键*/
    }

    另外,对于background-position中的position值,则有点特殊,top: 0%时与上述相同,但是设置为100%时是盒子底部与父元素底部挨着。
    计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / (父盒子高度-子盒子高度)
    这点需要注意。

    展开全文
  • 比如 top、left、transform属性的translate方法,他们的百分比都是相较谁而言的? top、left是基于父元素的: .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: ...
  • 关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出现偏差的,先看看一...
  • 我们要使用百分比的background-position值来解决一些问题。 通常使用方法 摆放图片 通常在容器里摆放图片是给出具体图片的top、left相对容器的top、left的值。 在CSS中很容易做到。 在容器里使用...
  • 问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;3,因为父级元素已经...
  • jquery代码: $(window).resize(function(){ $(".myblock").css({ position: "absolute", left: ($(window).width() - $(".myblock").outerWidth())/2, top: ($(window).height() - $(".myblock").outerHeight())/2...
  • position为absolue时候,其相关属性的百分比是相对它参考的元素(包含块)来进行计算并进行位置渲染的 。 首先我们必须知道: 1、[百分比的参照][1]: 根据包含块计算百分值(1)元素的margin/padding/left/right/...
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10,{ name}替换成Tony (使用正则表达式) 58 为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,...
  • 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素...
  • background-position %
  • 如果定位用的是百分比话,算法比较特殊。我举个例子: background:#FFF url(image) no-repeat fixed 50% -30%; 这个时候图片应该在容器的什么位置呢,算法公式如下:  图片左顶点距容器左顶点的坐标位置为  x...
  • 大部分人应该习惯于使用描述性词语(left、top、center…)或者数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距离容器顶部20px,可以使用 ...
  • CSS百分比参照物整理

    2019-06-20 15:34:39
    百分比的参照物 1.参照于包含块的高度:top、bottom、height 2.参照于包含块的宽度:left、right、width、margin(四个方向)、padding(四个方向) 3.参照于自身的尺寸:transform:translate(50%,30%);水平方向参照...
  • C#基础教程-c#实例教程,适合初学者

    万次阅读 多人点赞 2016-08-22 11:13:24
    C#基础教程-c#实例教程,适合初学者。 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序。...
  • 通过这篇文章能够深刻理解 background-position百分比 通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position 值来解决一些问题。 通常使用方法 摆放...
  • background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。 等同于 background-position:0,0; 也等同于background-position:0%,0%; 2. background-position:right ...
  • JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计

    万次阅读 多人点赞 2019-02-01 12:05:12
    position、z-index、left、top共同控制模型在所有内容的上方(堆叠顺序1上方,-1下方) @keyframes animatezoom 创建动画 animatezoom @-webkit-keyframes animatezoom 设置动画兼容-webkit-引擎浏览器 ...
  • CSS | absolute定位下宽高的百分比设定

    千次阅读 2019-01-21 11:26:00
     根据W3C CSS2对CSS1的修改,当子元素使用absolute定位时,宽高设定百分比的参考值不是父元素内容块的宽高,而是父元素padding box的宽高,即内边距+内容块宽高  W3C文档原文如下  **注意:  虽然此处的设定涉及...
  • 今天帮别人调代码时,看到一个样式: background-position: 50% 0;background-size: 100% auto; ...对background-size:100% auto,意思是背景...对background-position很自然的以为百分比是根据父元素宽度计算的,
  • ... left: 20px; background: greenyellow; width: 500px; height: 500px; } "relative1" > relative的表现和static一样,除非你添加了一些额外的属性 "relative2" > 复制代码
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { ... /*测试top百分比*/ .box { backgr.
  • Python练习题

    万次阅读 多人点赞 2017-02-10 11:12:40
    知乎上推荐GitHub上的Python练习题,算是用于巩固基础知识的加深熟悉python语言的良好方案,现将题目和答案做个总结。习题链接:每天一个Python练习第0题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,...
  • 下面开列出来: //position 属性值都有哪些 1、inside(自适应,柱状内部中央),top(柱状外的正上方),bottom(柱状外的正下方),left(柱状外的左边),right(柱状外的右边)。 2、坐标[x,y](以柱状的顶部为原点)。 3、...
  • position:relative与float的区别 postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,876
精华内容 12,350
关键字:

left百分比position