您的位置：首页 > 其它

4_如何固定标签，相对于浏览器窗口和一个标签？

2017-06-13 16:50 295 查看

什么是position？

position层级样式，有三个属性：

fixed：

　　　　　　　　固定在某一个位置，参照物为浏览器窗口（返回顶部按钮+对话窗口）

　　　　relative：

　　　　　　　　相对位置，本身不产生任何效果，和absolute连用，表示absolute的整块放在relative标签块中，

　　　　　　　　作用relative的区域，top，right，bottom，left的目标对象不再是窗口，而是relative所在的标签作用的区域

　　　　　　absolute：

　　　　　　　　绝对位置，固定在窗口的某个位置，一般和relative一起出现，

　　　　　　　　　单独出现以浏览器窗口为参照对象

　　　　　　　　　　三个属性后面可以top，right，bottom，left，

　　　　　　　　　　表示离对象的位置，两个属性就可以确定位置

如何逻辑整理？

fixed 作用于浏览器窗口，relative+absolute 把absolute标签固定在relative标签中

top，right，bottom，left，(上+右+底+左)离对象的位置参数，两个属性确定位置

写一个返回顶部的例子

　　fixed

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>返回顶部</title>
6     <style type="text/css">
7         .index{
8             height: 2000px;
9             width: 100%;
10             background-color: #f12401;
11         }
12         .top{
14             position: fixed;
15             right: 50px;
16             bottom: 100px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="index"></div>
22     <div class="top"><a href="#">返回顶部</a></div>
23 </body>
24 </html>

　　无论浏览器中内容如何变化，返回顶部都固定在窗口指定位置

　　relative + absolute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
.index{
height: 2000px;
width: 300px;
background-color: #f12401;
position: relative;
}
.top{
right: 10px;
top: 300px;
position: absolute;
}

</style>
</head>
<body>
<div class="index">
<div class="top"><a href="#">返回顶部</a></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航