快捷导航
蚂蚁部落 网站首页 前端教程 CSS教程 查看内容

栏目导航

≡基础教程≡

≡样式≡

≡盒模型≡

≡定位≡

≡简单选择器≡

≡结构性伪类选择器≡

≡动态伪类选择器≡

≡UI元素伪类选择器≡

≡打印伪类选择器≡

≡伪元素选择器≡

≡属性选择器≡

≡进阶知识≡

CSS position:fixed 固定定位

2018-2-12 10:50| 发布者: admin| 查看: 2116| 评论: 0|来自: 蚂蚁部落

fixed固定定位和absolute绝对定位比较类似,它们都能够让元素产生位移,并且脱离文档流。

关于absolute绝对定位可以参阅CSS absolute绝对定位一章节。

通过以下代码可以将元素设置为固定定位:

[CSS] 纯文本查看 复制代码
position:fixed

top、bottom、left和right属性分别设置元素在垂直和水平方位的位移尺寸。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:fixed;
  left:50px;
  top:30px;
}  
</style> 
</head> 
<body> 
<div class="ant"></div> 
</body> 
</html>

上面演示了固定定位;到目前为止还没有看到与绝对定位的区别,再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body {
  margin:0px;
  padding:0px;
  height:1500px;
}
.ant-absolute{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:absolute;
  left:50px;
  top:30px;
} 
.ant-fixed{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:fixed;
  right:50px;
  top:30px;
}  
</style> 
</head> 
<body> 
<div class="ant-absolute"></div> 
<div class="ant-fixed"></div>
</body> 
</html>

拖动滚动条就可以看到两个定位方式的区别,固定定位的元素如其名一样,能够固定在某个位置。

二.固定定位位移参考对象:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
#fixed {
  position:fixed;
  width: 150px;
  height: 50px;
  text-align:center;
  line-height:50px;
  top: 0;
  right: 10px;
  background: #ccc;
}
</style>
</head>
<body>
<div id="relative">
  <div id="fixed">蚂蚁部落</div>
</div>
</body>
</html>

position:fixed定位元素的参考对象是视口(准确的说是视口产生的包含块,此包含块的尺寸和左上角均与视口一致,于是当我们拖动滚动条的时候,fixed定位的元素会有固定效果。),而不是距离它最近的采用定位的元素。

如果固定定位的尺寸是百分比形式,它的参考尺寸也是视口的尺寸,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
#fixed {
  position:fixed;
  width: 50%;
  height: 50%;
  text-align:center;
  line-height:50px;
  top: 0;
  right: 50px;
  background: #ccc;
}
</style>
</head>
<body>
<div id="relative">
  <div id="fixed">蚂蚁部落</div>
</div>
</body>
</html>

transform对位移参考对象也会产生影响,具体参阅transform变换改变定位元素的包含块一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:55 , Processed in 0.098332 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部