relative和absolute.

Posted 2020-08-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了relative和absolute.相关的知识，希望对你有一定的参考价值。

absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性。（脱离文档流即是指：将元素从普通的排版中拿走，其他盒子定位定位的时候会把脱离文档流的元素不存在，对于float脱离文档流，其他盒子元素无视它但文本不能。absolute的话，盒子和盒子的文本都无视它）
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。

试验1：对absolute设置父元素和不设置父元素来验证一下结论。如下图，证实absolute的定位是相对于父元素的。

<img src="1.jpg.JPG" style="position:absolute;left:0px;right:0px;" width=200px hight=200px>   
<div style="position:relative;left:100px;top:100px""><img src="1.jpg.JPG" style="position:absolute;left:0px;right:0px;" width=200px hight=200px>   </div>

技术分享

试验2:将图片左浮动，段落position设置为relative,只有段落里的文本会让开它，其它的属性都无视它。但如果将relative设置为absolute的话，会产生下面一副图的的效果。

<body>
    <img src="1.jpg.JPG" style="float:left" width=100px height=100px>
       <p style="position:relative;left:0px;right:0px;padding:10px; border:1px solid blue;"> block block block block block block block block block block block block block
        block block block block block block block block block block block block block block block block block block block block block </p>

</body>

技术分享