4个例子,margin同理
正常使用:
<body> <div style="width:1200px;height: 400px;background-color: blue;"> <div style="padding-top: 10%;"> <p style="position: relative"> 默认使用情况:参照物为父元素(前提是父元素不为inline元素) </p> </div> </div> </body>
非正常使用:
<body> <div style="width:1200px;height: 400px;background-color: blue;"> <div style="width:800px;height: 400px;background-color: red;display: inline;"> <div style="padding-top: 10%;"> </div> </div> </div> </body>
<body> <div style="width:1200px;height: 400px;background-color: blue;"> <div style="width:800px;height: 400px;background-color: red;"> <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;"> </div> </div> </div> </body>
<body style="width: 1500px;position: absolute;"> <div style="width:1200px;height: 400px;background-color: blue;position: absolute;"> <div style="width:800px;height: 400px;background-color: red;"> <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;"> </div> </div> </div> </body>