关于定位布局中的相对定位

来源：懂视网责编：小采时间：2020-11-27 18:53:13

关于定位布局中的相对定位

关于定位布局中的相对定位:关于CSS中定位布局的相对定位-relative相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）

推荐度：

点击下载本文 文档为doc格式

导读关于定位布局中的相对定位:关于CSS中定位布局的相对定位-relative相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）

关于CSS中定位布局的相对定位-relative

相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。

相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .orange{
 width: 400px;
 height: 300px;
 background-color: orange;
 }
/*红色区块设置为相对布局，虽然往下便宜150PX,但仍占据了位置，使得黄色，绿色无法浮动到最左边*/
 .red{
 width: 100px;
 height: 100px;
 background-color: red;
 float: left;
 position:relative;
 margin-top: 150px;

 }

 .yellow{
 width: 100px;
 height: 100px;
 background-color: yellow;
 float: left;
 }
 
 .green{
 width: 100px;
 height: 100px;
 background-color: green;
 float: left;
 }

/*蓝色区块相对自身偏离了30px,10px,但黑色区块的位置是以蓝色之前的位置向下偏移10px*/

 .blue{
 width:50px;
 height: 50px;
 background-color: blue;
 position: relative;
 top:30px;
 left:10px;

 }

 .black{
 width:30px;
 height: 30px;
 background-color: black;
 margin-top: 10px;
 }
 </style>
</head>
<body>
 <p class="orange">
 <p class = "red">
 <p class = "blue"></p>
 <p class = "black"></p>
 </p>
 <p class = "yellow"></p>
 <p class = "green"></p>
 </p>
</body>
</html>

更多关于定位布局中的相对定位相关文章请关注PHP中文网！

关于定位布局中的相对定位

推荐度：

点击下载本文 文档为doc格式

标签：定位中的布局

热门焦点

关于定位布局中的相对定位

关于定位布局中的相对定位

关于定位布局中的相对定位

最新推荐

猜你喜欢

热门推荐