CSS之定位属性

黑马程序员官方

于 2020-11-12 15:12:41 发布

阅读量267

点赞数

分类专栏：前端文章标签：定位 css css3 js html

本文链接：https://blog.csdn.net/itcast_cn/article/details/109644518

版权

前端专栏收录该内容

54 篇文章 45 订阅

订阅专栏

一定位介绍

定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的.

二定位类别

1.相对定位

相对定位就是相对于自己以前在标准流中的位置来移动

语法:

position: relative; 配合left, top, right,bottom等属性使用

特点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom

由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素

设置margin/padding等属性的时会影响到标准流的布局

2.绝对定位

默认情况下绝对定位就是相对于body来定位

语法

position: absolute; 配合left, top, right,bottom等属性使用

特点

绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素

如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是

以整个网页的宽度和高度作为参考点

默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且

祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点

3. 固定定位

固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动

语法

position: fixed; 配合left, top, right,bottom等属性使用

特点

固定定位的元素是脱离标准流的, 不会占用标准流中的空间

固定定位和绝对定位一样不区分行内/块级/行内块

三定位属性的应用
1. 效果

2. 代码实现

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF‐8"> 
<title>猫眼电影</title> 
<style> 
* { 
margin: 0px; 
padding: 0px; 
}
.box {
width: 200px; 
height: 320px; 
border: 1px solid #cccccc; 
margin: 0px auto; 
margin‐top: 50px; 
position: relative; 
}
.box img { 
width: 200px; 
height: 280px; 
}
.box .tip { 
width: 30px; 
/* height: 20px;*/ 
background‐color: #0084FF; 
line‐height: 20px; 
text‐align: center; 
font‐weight: bold; 
color: white; 
font‐size: 14px; 
font‐style: italic; 
position: absolute; 
left: ‐2px; 
top: 6px; 
}
.box .fileName { 
width: 60px; 
line‐height: 40px; 
color: white; 
font‐weight: 500; 
font‐size: 18px; 
font‐family: 宋体; 
text‐align: center; 
position: absolute; 
left: 0px; 
bottom: 40px; 
}
.box .buyTicket{ 
width: 200px; 
line‐height: 40px; 
text‐align: center; 
display: inline‐block; 
color: #EF4238; 
font‐family: 宋体; 
font‐weight: 600; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
<img src="img/film.jpg"> 
<span class="tip">3D</span> 
<span class="fileName">谜巢</span> 
<span class="buyTicket">购 票</span> 
</div> 
</body> 
</html>