19.多盒子嵌套定位
2018-02-03 11:36
162 查看
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多盒子嵌套定位</title>
<style type="text/css">
.one{
width:500px;
height:500px;
background:red;
position:relative;
}
.two{
width:400px;
height:400px;
background:green;
position:absolute;
}
.three{
width:300px;
height:300px;
background:pink;
position:relative;
}
.four{
width:200px;
height:200px;
background:yellow;
position:absolute;
left:90px;
top:0;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four"></div>
</div>
</div>
</div>
</body>
</html>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多盒子嵌套定位</title>
<style type="text/css">
.one{
width:500px;
height:500px;
background:red;
position:relative;
}
.two{
width:400px;
height:400px;
background:green;
position:absolute;
}
.three{
width:300px;
height:300px;
background:pink;
position:relative;
}
.four{
width:200px;
height:200px;
background:yellow;
position:absolute;
left:90px;
top:0;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four"></div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS基础知识总结之背景、尺寸、显示、盒子、定位
- 页面嵌套frame，Selenium定位问题
- 《iOS移动开发从入门到精通》图书连载19:函数的嵌套
- web前端学习笔记(CSS盒子的定位)
- 第04天C语言(19):循环嵌套练习03
- 关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题
- 盒子的定位
- 4-6绝对定位以盒子为参考点
- 页面嵌套frame，Selenium定位问题
- css文档布局——盒子定位
- CSS中常见属性和值、盒子和定位
- 定位的盒子居中方法
- CSS 设计彻底研究（四）盒子的浮动与定位
- 嵌套盒子，让子div在父div中居中
- “盒子”们应学习SONY产品定位
- 19.Swift-类型嵌套
- 4---css的核心：盒子、浮动+定位
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
- 初学牛腩CSS核心内容标准流，盒子模型，浮动，定位
- frame 嵌套页面定位元素方法