• 所有问题

    • CSS中的利用margin和position定位时的不同

    如题所述

    举报该问题
    推荐答案   2016-08-04
    先来看例子吧：
    <HTML>
    <head>
    <style>
    .red{border:2px solid red;}
    </style>
    </head>
    <body>
    <div style="padding:10px;width:100px;" class="red">
    <div id="a" class="red">AAAA</div>
    <div id="b" class="red">BBBB</div>
    </div>
    </body>
    </html>

    以上代码在浏览器中的显示效果如下：

    AAAA
    BBBB

    下面通过position属性来把AAAA往上移动8px，在head的style里面加入#a{position:relative;top:-8px;}即：

    <HTML>
    <head>
    <style>
    .red{border:2px solid red;}
    #a{position:relative;top:-8px;}
    </style>
    </head>
    <body>
    <div style="padding:10px;width:100px;" class="red">
    <div id="a" class="red">AAAA</div>
    <div id="b" class="red">BBBB</div>
    </div>
    </body>
    </html>

    效果如下：

    AAAA
    BBBB

    而如果通过margin-top:-8px来调整的话，即：

    <HTML>
    <head>
    <style>
    .red{border:2px solid red;}
    #a{margin-top:-8px;}
    </style>
    </head>
    <body>
    <div style="padding:10px;width:100px;" class="red">
    <div id="a" class="red">AAAA</div>
    <div id="b" class="red">BBBB</div>
    </div>
    </body>
    </html>

    效果如下：

    AAAA
    BBBB

    看到不同了吧，用position属性来调整的时候，只是被调整的div移动了，而下面的div不会动；用margin属性调整就不同了，下面的div也会相应的向上移动8px，但是并不影响下面的padding值。
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2016-08-04
    margin正数是向外面扩展空间，负数是对本身内部扩展空间。
    position 和margin 他们是没得好多关系的，position: absolute、relative。用于相对绝对定位。
    第2个回答  2018-03-15
    margin 定位大概就是说一个框框在一堆框框里设置了对上下左右的距离
    position定位就是吧这个框框拿出来 在上一级的大小中设置上下左右的距离
    有事例的话可以讲解一下
    第3个回答  2021-03-06

    Vue实践-CSS样式position/display/float属性对比使用

    第4个回答  2016-08-04
    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 属性的值。
    margin可以设置距离上下左右的距离，可以跟fixed结合，来绝对定位。
    相似回答
    请教前端排版技巧,margin 和position的区别答：margin是外边距，就好比你家的房子与周围其他房子之间的距离，也就是说margin是受周围其他元素影响的。position则是定位，根据参数的不同会有不同的定位方式。position:relative 是相对定位，是以元素的当前位置来作为定位的参照物，比如left:10px; top:-5px，就是把元素往左挪10像素，往上挪5像素。po...
    css中的绝对定位和相对定位有什么区别答：个人的理解。相对定位：在原位置上占用空间，可以设置浮动的上下位置。绝对位置：在原位置上，不占用空间，设置位置会以整个页面为标准。--- 以下是复制别人的 ---一.相对定位 相对定位是一个非常简单容易掌握的概念，如果对一个元素进行相对定位，他将出现在其他所在的位置上。然后，可以通过设置垂直或...
    大家正在搜
    相关问题
    css当中的margin与position定位问题
    CSS里的margin和position:relative ...
    css中margin和position同时使用
    请教前端排版技巧，margin 和position的区别
    css中的定位left与margin-left有什么本质区别...
    html position定位问题 和margin问题
    CSS布局浮动(float)和定位(position)属性的...
    CSS中的确我们发现position：absolute和ma...