一：Css
1.1：position定义和用法
position 属性规定元素的定位类型。
可能的值
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
查看完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
border:1px solid #f60; width:100px; height:100px; margin:0 auto;
-webkit-border-radius:50px;
-moz-border-radius:50px;
-o-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<div style="position: relative;width: 500px;height: 300px;border: 2px solid red;margin:0 auto">
<div style="position: absolute;width: 50px;height: 50px;background-color: black;left: 0;bottom: 0"></div>
<div style="position: absolute;width: 50px;height: 50px;background-color: blue;right: 0;bottom: 0"></div>
<div style="position: absolute;width: 50px;height: 50px;background-color: red;right: 0;top: 0"></div>
<div style="position: absolute;width: 50px;height: 50px;background-color: darkgoldenrod;top: 0;bottom: 0"></div>
<div class="box" style="position: absolute;
top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;"></div>
</div>
</body>
</html>
position
时间： 2024-10-11 17:00:35