固定定位+锚记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位+锚记</title>
<style type="text/css">
.main{
height: 3000px;
/*padding: 1500px 0px;*/
}
.img{
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<!--网页高度3屏-->
<div class="main">
<h1 id="top">我是顶部</h1>
<div class="img">
<a href="#top"><img src="img/huiding.png"/></a>
</div>
</div>
</body>
</html>
相对定位绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对定位绝对定位</title>
<style type="text/css">
.parent{
/*800*400,边框10像素红色,水平居中*/
margin: 100px auto;
width: 800px;
height: 400px;
border: 10px solid red;
position: relative;
}
.son{
width: 400px;
height: 200px;
background-color: blue;
position: absolute;
left: 0px;
}
.son1{
width: 400px;
height: 200px;
background-color: green;
position: absolute;
right: 0px;
}
.son2{
width: 400px;
height: 200px;
background-color: hotpink;
position: absolute;
top: 200px;
left: 0px;
}
.son3{
width: 400px;
height: 200px;
background-color: darkorange;
position: absolute;
top: 200px;
right: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号