CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用

最新推荐文章于 2021-06-03 05:28:43 发布

阿敏Joney

最新推荐文章于 2021-06-03 05:28:43 发布

阅读量493

点赞数

分类专栏：前端相关文章标签： html 定位 css3

本文链接：https://blog.csdn.net/xfwdxt/article/details/106122414

版权

前端相关专栏收录该内容

16 篇文章 2 订阅

订阅专栏

准备布局：

<!DOCTYPE html>
<html>
<head>
<style> 
*{ margin:0; padding:0; }
.base-container{
  width: 500px;
  height: 500px;
  background-color:lightgray;
  border:1px dashed red;
}
.base-compare {
  width:200px;
  height:100px;
  background-color:yellow;
  border:1px solid purple;
}
.base-parent {
  width:300px;
  height:230px;
  background-color:green;
}
.base-child {
  width:200px; // 宽高同.base-compare
  height:100px;
  background-color:cyan;
  border:1px solid purple;
}
</style>
</head>
<body>
<div class="base-container"><!--测试容器-->
  <div class="base-compare">我是参考div</div>
  <div class="base-parent parent"><!--父级div-->
      <div class="base-child child">我是子级div</div>
  </div>
</div>
</body>
</html>

（1）父级为relative，子级为absolute时：

.parent{
position:relative;
}
.child{
position:absolute;
top:30px; // 如果是百分比%，则相对于父容器的高度的百分比
left:20px;
// margin-top:30px; // 非%为单位时，等效，效果叠加；%为单位时，不等效！
// margin-left:20px; // 同上
}