定位
position属性
-
表示设置定位
- 绝对定位
- 固定定位
- 相对定位
绝对定位
- position : absolute - 表示设置绝对定位
-
绝对定位的注意
- 设置绝对定位后,当前元素脱离文档流
- 如果指定元素的父级元素是<body>元素 - 该元素就是相对于当前页面的定位
- 如果指定元素的父级元素不是<body>元素,父级元素没有开启定位 - 该元素就是相对于当前页面的定位
- 如果指定元素的父级元素不是<body>元素,父级元素开启定位 - 该元素就是相对于父级元素的定位
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body {
margin: 0;
}
#d1 {
width: 200px;
height: 200px;
background-color: red;
/*
position: absolute - 表示设置绝对定位
* 可以通过 上、右、下、左、四个方向来设置定位后元素显示的位置
绝对定位的注意
* 设置绝对定位后,当前元素脱离文档流
* 如果指定元素的父级元素是<body>元素 - 该元素就是相对于当前页面的定位
* 如果指定元素的父级元素不是<body>元素,父级元素没有开启定位 - 该元素就是相对于当前页面的定位
* 如果指定元素的父级元素不是<body>元素,父级元素开启定位 - 该元素就是相对于父级元素的定位
*/
margin: 100px;
position: absolute;
top: 100px;
left: 100px;
}
#d2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
固定定位
- position: fixed - 表示设置固定定位
- 设置固定定位的元素会脱离文档流
- 固定定位是相对于浏览器显示窗口定位显示位置
- 设置固定定位的元素,不会跟着页面滚动而滚动
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body {
margin: 0;
height: 2000px;
}
div {
width: 200px;
height: 200px;
}
/*
position: fixed - 表示设置固定定位
* 设置固定定位的元素会脱离文档流
* 固定定位是相对于浏览器显示窗口定位显示位置
* 设置固定定位的元素,不会跟着页面滚动而滚动
*/
#d1 {
background-color: red;
position: fixed;
top: 100px;
left: 100px;
}
#d2 {
background-color: green;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
相对定位
- position: relative - 表示设置相对定位
- 设置相对定位的元素不会脱离文档流
- 相对定位是相对于元素本身原本的位置定位
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
body {
margin: 0;
}
#d1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
/*
position: relative - 表示设置相对定位
* 设置相对定位的元素不会脱离文档流
* 相对定位是相对于元素本身原本的位置定位
*/
#d2 {
width: 100px;
height: 100px;
background-color: green;
margin-left: 100px;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
堆叠
- 表示元素之间出现的重叠效果
-
z-index属性 - 表示设置堆叠的显示
- z-index属性只能出现在开启定位的元素中
- z-index属性值大的覆盖z-index属性值小
- z-index属性的属性值为数字值
<head>
<meta charset="UTF-8">
<title>堆叠</title>
<style>
/*
堆叠 - 表示元素之间出现的重叠效果
* z-index属性 - 表示设置堆叠的显示
* z-index属性值大的覆盖z-index属性值小
* z-index属性只能出现在开启定位的元素中
* z-index属性的属性值为数字值
*/
body {
margin: 0;
}
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
}
#d2 {
background-color: green;
position: relative;
left: 50px;
top: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
继承
- 表示CSS的样式属性可以作用在指定元素的后代元素上
-
CSS的样式属性分为
- 可继承的属性 - 表示指定元素的样式可以作用在其所有的后代元素上
- 不可继承的属性 - 表示只能作用在指定元素
- inherit - 表示可以选择是否为继承属性
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
/*
继承 - 表示CSS的样式属性可以作用在指定元素的后代元素上
* CSS的样式属性分为
* 可继承的属性 - 表示指定元素的样式可以作用在其所有的后代元素上
* 不可继承的属性 - 表示只能作用在指定元素
* inherit - 表示可以选择是否为继承属性
*/
body {
font-size: 12px;
}
p {
/* 当前样式属性的值继承于祖先元素 */
font-size: inherit;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, architecto asperiores aspernatur, beatae dolor esse excepturi fuga iusto labore mollitia odit quae quisquam rem repellat sit unde velit? Magnam, rem!</p>
</body>