HTML5学习_day06(2)--html之相对定位

来源：互联网发布：淘宝发货怎么设置编辑：程序博客网时间：2024/05/16 05:58

相对定位就是相对于自己原来的位置只是内容偏移了而已

并且原有占用的空间依旧存在不会被其他元素填充

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>相对定位</title><style type="text/css">#div{width: 1000px;border: 3px solid red;}#div div{width: 200px;height: 200px;border: 4px solid;display: inline-block;}/*#div .div1{position: relative;left: 230px;right:100px;  优先级 left>right  top>bottomtop:100px;bottom: 100px;margin-left:50px;}*//* 问题一   #div .div1{position: relative;top:50px;margin-top: 100px;  这样设置会整体下移  要重新设置对齐方式 vertical-align: top;}*/</style></head><body><!--1.什么是相对定位(参考点永远是自身的左上角)也就是相对于自己在文档流中的位置进行定位。2.相对定位的几个特性1.不脱离文档流，原有位置空间被保留2.不影响元素本身属性的设置4.如果给元素设置了相对定位胆不设置偏移量，元素本身就不受任何影响的。--><div id="div"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div class="div4">div4</div></div><!--注意：1.如果一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top设置的值。2.一个定位元素，如果同时设置了left和right,那么优先级取决于网站语言，在英语网页中left优先级更高，在阿拉伯语言的网页中right优先级更高3.如果一个元素设置了定位(甚至是偏设置了移)，其他元素在排版的参考的依然是那个元素的原有位置(没有设置偏移的位置)4.如果一个元素设置了相对定位，原有位置空间被保留，即使该元素做偏移，其他元素也不会占据他原有(偏移前)的位置。-->z-index:默认是0;</body></html>

0 0