居中五环、两栏布局 【定位】
2020-02-03 04:12
260 查看
居中五环、两栏布局 【定位】
- absolute绝对定位
-
脱离原来位置进行定位
- 相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位
- relative
-
保留原来位置进行定位
- 相对于自己原来的位置进行定位
- fixed
-
滚动页面不动
- 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; }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 学习小记——居中五环和两栏布局/三栏布局的实例练习
- 内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局
- 【CSS】CSS经典布局之居中定位
- CSS之定位、居中、浮动及利用浮动设计网页布局和导航
- IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
- 页面布局(各种居中定位等)
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- [置顶] css设置标签的水平与垂直居中,定位与弹性盒布局的的结合
- div浮动居中 单div盒子和三列布局中间div盒子浮动居中方法
- Android各种布局居中方法
- HorizontalScrollView将子View布局居中
- 如何解决IOS系统下fixed定位布局失败的兼容问题
- Div+CSS布局居中
- CSS水平居中,垂直居中以及各种布局方式
- 自动内存管理机制(2)——虚拟机对象的创建、内存布局和访问定位
- 绝对定位元素的水平垂直居中
- CSS布局盒子模型之定位属性(position)
- 网页布局基础——文档流、盒子模型、浮动、定位
- css+div水平垂直居中布局总结(3种方案)
- DIV+CSS中让布局居中_背景图片居中_文字内容居中