重生之我学--盒模型--相对定位-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_85545586/article/details/142872745

盒子的定位

1.定位方式

position 属性可以选择4中不同类型的定位方式，语法格式如下，

position:static / relative I absolute | fixed

参数：statie 静态定位为默认值，为无特殊定位，对象遵循HTML定位规则。relative生成相对定位的元素，相对于其正常位置进行定位。absolute生成绝对定位的元素，元素的位置通过left、top、right和 bottom 属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及bottom属性进行规定。

2.左、右、上、下位置

语法格式：

left:auto | length

right:auto | length

top:auto / length

bottom: auto | length

参数：auto 无特殊定位，根据HTML定位规则在文档流中分配。length是由数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative、此取值方可生效。

说明：用于设置对象与其最近一个定位的父对象左边相关的位置。

3.宽度

语法格式：

width:auto | length

4.高度

语法格式：

height:auto | length

5.最小高度（min-height)

语法格式：

min-height:auto | length

参数：同宽度（width)。

说明：用于设置对象的最小高度，即为对象的高度设置一个最低限制。因此，元素可以比指定值高，但不能比指定值低，也不允许指定负值。

6.可见性（visibility)

语法格式：

visibility：inherit | visible | collapse | hidden

参数：inherit 继承上一个父对象的可见性。visible使对象可见，如果希望对象可见，其父对象也必须是可见的。collapse主要用来因篡改表格的行和列，隐藏的行和列能够被其它内容使用，对于表格外的其他对象，其作用等同于 hidden。hidden使对象被隐藏

7、层叠顺序

语法格式：

z-index:auto | number

参数：auto遵从其父对象的定位。nnumber为无单位的整数值，可为负数。

相对定位

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量。其中，水平方向的偏移量由 left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

普通文档流

运行代码：

 <style>
div{  width: 100px;
    height: 100px;
    background-color: blue;
    border: 2px red dashed;
 
}
    </style>
    
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
   
    
</body>
</html>

运行结果：

加了属性的文档流

运行代码：

  <style>
div{  
    width: 100px;
    height: 100px;
    background-color: plum;

}
#u1{
    border: 10px blue solid;
}
#u2{
    border: 10px blue solid;
    position: relative;
    left: 50px;
    top:30px
}
#u3{
    border: 10px blue solid;
}

    </style>
    
</head>
<body>
<div id="u1"></div>
<div  id="u2"></div>
<div  id="u3"></div>
</body>
</html>

运行结果：

练习：

运行代码：

  <style>
#a{width: 100px;
height: 100px;
border: 10px red solid;
}
#a1{width: 100px;
height: 100px;
border: 10px green solid;
position: relative;
left: 30px;
top: 30px;
}
#a2{width: 100px;
height: 100px;
border: 10px blue solid;
position: relative;
left: 5px;
}
#a3{width: 100px;
height: 100px;
position: relative;
}

#a4{width: 100px;
height: 100px;

}
#a5{width: 100px;
height: 100px;


}
div{  width: 100px;
    height: 100px;
    background-color: wheat;
    border: 10px orange solid;
    top: 300px;
   
}

</style>
    
    
</head>
<body>
    
   <img src="../图片/橘子.jpg" id="a">
   <img src="../图片/橘子.jpg" id="a1">
   <img src="../图片/橘子.jpg" id="a2">
   <br>
   <img src="../图片/橘子.jpg" id="a3">
   <img src="../图片/橘子.jpg" id="a4">
   <img src="../图片/橘子.jpg" id="a5">
   <div></div>
   <div></div>
   <div></div>
    
</body>
</html>

运行结果：