- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .box1{
- width: 200px;
- height: 100px;
- position: relative;
- border: 1px dashed green;
- }
- /* 点开头为类选择器 relative 是相对定位, absolute 是绝对定位,
- 一般父类是相对, 子类是绝对 z-index 表示堆叠顺序 */
- .box2{
- width: 100px;
- height: 50px;
- position: absolute;
- border: 1px dashed blue;
- background-color: red;
- z-index: -1;
- top: 20px;
- left: 20px;
- }
- p{
- position: fixed;
- top: 20px;
- left: 10px
- }
- .box3, .box4, .box5, .box6, .box7, .box8{
- width: 100px;
- height: 50px;
- float: left;
- }
- .box3, .box6{
- background-color:red;
- }
- .box4, .box7{
- background-color:gold;
- }
- .box5, .box8{
- background-color:green;
- }
- /*float 表示浮动. 浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止.
- 设置了浮动的元素, 脱离标准流 (脱标).
- 行内元素设置浮动可以设置宽高.
- 块级元素设置浮动可以在一行显示.*/
- /*p 是标签选择器 fixed 是规定位置, 是相对与浏览器视口本身的定位 */
- </style>
- </head>
- <body>
- <div class="box1">
- <div class="box2"></div>
- </div>
- <p > 默认的 z-index 是 0.Z-index -1 拥有更低的优先级 </p>
- <div class="box3">
我是块级元素 1
- </div>
- <div class="box4">
我是块级元素 2
- </div>
- <div class="box5">
我是块级元素 3
- </div>
- <span class="box6"> 我是行内元素 4</span>
- <span class="box7"> 我是行内元素 5</span> <!--span 是用来组合行内元素 -->
- <span class="box8"> 我是行内元素 6</span>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3281684.html