问答详情
源自:6-1 CSS margin失效情形解析

关于绝对定位的margin属性的问题

关于绝对定位那里没怎么懂。如果子元素绝对定位了,父元素不是不能获取这个绝对定位的子元素的高度吗,那设置margin-bottom为什么会撑高父容器的?而且我自己写测试也不能撑高父元素高度。还是说我理解有误,有一些关键的东西跟视频里设置的不一样

提问者:_yuny_ 2017-08-11 18:00

个回答

  • 慕运维2471188
    2019-11-27 11:47:19

    <!DOCTYPE html>

    <html>

    <head> 

    <meta charset="utf-8"> 

    <title>W3Cschool教程(w3cschool.cn)</title> 

    <style type="text/css" media="all">

        .div2 {

           position: relative;

           border: 1px solid;

           width: 600px;

           height: 600px;

           overflow: auto;

        }

        .img1 {

            position: absolute;

            top: 10%;

            left: 10%;

            margin-top:10%;

            margin-left:10%;

            /*以下仍然失效 */

            margin-right:80%;

            /*变得有效*/

            margin-bottom:80%;

        }

    </style>

    </head> 

    <body>

    <div class="div2">

        <img class= "img1" src="http://photocdn.sohu.com/20150505/mp13579778_1430811186687_4.jpeg"

        alt="" width="150" style="">

    </div>

    </body>

    </html>


  • 今朝
    2017-08-22 19:53:11

    父元素应该设置了position: relative属性了吧