<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
/*
一、定位：将盒子指定到页面的中的任意位置。
1.position 属性可以开启元素的定位
可选值：
static 没有开启定位（默认值）
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘性定位
2.开启定位后通过 top right bottom left 四个属性设置元素的位置
二。固定定位
1.会脱离文档流
2.固定定位会改变元素的显示模式，具有行内块元素的特点
3.固定定位参照浏览器的可视窗口进行定位的
4.元素会固定在浏览器可视窗口的某个位置
*/
body{
height: 2000px;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #c7edcc;
/*开启固定定位*/
position: fixed;
/*移动元素位置*/
right: 10px;
bottom: 10px;
}
.box2{
background-color: #fde6e0;
}
.father{
width: 300px;
height: 300px;
background-color: #dce2f1;
margin-top: 100px;
margin-left: 100px;
position: relative;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">我是渣渣辉，是兄弟就来</div>
</div>
<div class="box2"></div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)