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

栏目导航

≡基础教程≡

≡样式≡

≡盒模型≡

≡定位≡

≡简单选择器≡

≡结构性伪类选择器≡

≡动态伪类选择器≡

≡UI元素伪类选择器≡

≡打印伪类选择器≡

≡伪元素选择器≡

≡属性选择器≡

≡进阶知识≡

CSS position:absolute 绝对定位

2017-10-10 00:05| 发布者: admin| 查看: 1098| 评论: 0|来自: 蚂蚁部落

传智播客

一.绝对定位基本概念:

相对定位虽然也能够产生位移,但是并没有脱离文档流,具体参阅CSS 相对定位一章节。

绝对定位不但能够使元素产生位移,也能够使其脱离文档流,通过以下代码可以将元素设置为相对定位:

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

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

代码实例如下:

[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:absolute;
  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">
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
#middle {
  background: red;
  width: 50px;
  height: 50px;
}
#absolute {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  right: 10px;
  background: blue;
}
</style> 
</head> 
<body> 
<div id="relative">
  <div id="middle">
    <div id="absolute"></div>
  </div>
</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;
}
#middle {
  background: red;
  width: 50px;
  height: 50px;
}
#absolute {
  position: absolute;
  width: 30%;
  height: 30%;
  top: 10px;
  right: 10px;
  background: blue;
}
</style> 
</head> 
<body> 
<div id="relative">
  <div id="middle">
    <div id="absolute"></div>
  </div>
</div>
</body> 
</html>

最里面定位的div元素的尺寸是参考父辈元素中最近的定位元素(准确的说是此元素产生的包含块)的尺寸。

如果绝对定位元素的父辈元素中没有采用定位的,那么此绝对定位元素的参考对象是谁呢,有的人说是body,有的人会说是document,其实都不是,看MDN上的介绍,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/05/104730g300s32hl801s006.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

以initial containing block为参考,它的尺寸是和视口是一致的,但不是由Viewport所产生的,而是由根元素<html>所产生的。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
body {
  height:1500px;
}
div {
  width:100px;
  height:50px;
  background:green;
  position:absolute;
  bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

如果参考对象是body或者document的话,div元素肯定要位于页面的最底部,这里只是位于视口的最底部。

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-12-11 19:24 , Processed in 0.068570 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部