HTML的定位

最新推荐文章于 2024-05-21 23:21:19 发布

top9523

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量185

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/top9523/article/details/125504553

版权

一、定位的取值

1.static（静态定位）：默认定位

2.相对定位relative：

参考物：定位前的位置

特点：不影响元素本身的特点、元素不脱离文档流、相对于原位置进行偏移

3.绝对定位absolute：

参考物：最近的使用了定位的父级，如果没有找body

特点：元素脱离文档流、行元素支持所有的css样式、块元素内容撑开宽度、清除子级浮动

4.固定定位:

参考物：浏览器窗口

特点：脱离文档流、清除子级浮动

二、作用

1.可以使用偏移描述（top bottom left right）

2.可以使用z-index提升层级

三、练习

利用浮动画出哆啦A梦

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

.item {
width: 250px;
height: 250px;
background-color: #fff;
position: relative;
}

.item div {
position: absolute;
}

.head {
width: 250px;
height: 250px;
background-color: deepskyblue;
border-radius: 50%;
}

.eye {
width: 50px;
height: 60px;
background-color: white;
border: 2px solid rgb(78, 75, 75);
border-radius: 32px;
left: 73px;
top: 40px;
z-index: 1;
}

.eye2 {
left: 125px;
}

.yz {
width: 12px;
height: 12px;
background-color: black;
border-radius: 50%;
top: 25px;
left: 5px;
z-index: 1;
}

.eye1 .yz {
left: 33px;
}

.nose {
width: 26px;
height: 26px;
background-color: rgb(143, 25, 25);
border-radius: 50%;
border: 2px solid rgb(23, 23, 23);
top: 94px;
left: 111.5px;
z-index: 1;
}

.face {
width: 160px;
height: 120px;
background-color: white;
border-radius: 50px;
top: 75px;
left: 45.5px;
}

.xian {
height: 45px;
width: 2.5px;
background-color: black;
top: 124px;
left: 125.5px;
}

.circle {
width: 120px;
height: 150px;
background-color: transparent;
border-radius: 60px;
border-bottom: 2.5px solid #111;
top: 18px;
left: 66px;
}
</style>
</head>

<body>
<div class="item">
<div class="head">
<div class="eye eye1">
<div class="yz"></div>
</div>
<div class="eye eye2">
<div class="yz"></div>
</div>
<div class="nose"></div>
<div class="face"></div>
<div class="xian"></div>
<div class="circle"></div>
</div>
</div>
</body>

</html>