您的位置:首页 > 其它

居中五环、两栏布局 【定位】

2020-02-03 04:12 260 查看

居中五环、两栏布局 【定位】

  1. absolute绝对定位
      脱离原来位置进行定位
    • 相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位
  2. relative
      保留原来位置进行定位
    • 相对于自己原来的位置进行定位
  3. fixed
      滚动页面不动
  4. static(默认值)

用relative作为参照物,用absolute进行定位

<!-- 五环固定中间不动 -->
<div class="demo"></div>
<div class="box"></div>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>

<!-- 两栏布局 -->
<div class="right"></div>
<div class="left"></div>
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
}
.circle1{
border: 10px solid black;
margin-left: -50px;
margin-top: -50px;
}
.circle2{
border: 10px solid blue;
margin-left: -170px;
margin-top: -50px;
}
.circle3{
border: 10px solid red;
margin-top: -50px;
margin-left: 70px;
z-index:3
}
.circle4{
border: 10px solid yellow;
margin-left: -110px;
}
.circle5{
border: 10px solid green;
margin-left: 10px;
}

.right{
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: #0ff;
/*opacity: 0.5;*/
}
.left{
margin-right: 100px;
height: 100px;
background-color: #0f0;
}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
WangYanming_ 发布了8 篇原创文章 · 获赞 1 · 访问量 88 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: