固定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
html, body {
min-width: 1000px;
}
body {
margin: 0;
height: 5000px;
}
.box {
width: 260px;
height: 420px;
background-color: orange;
}
/*固定定位
1、定位属性值：fixed
2、在页面中不再占位(浮起来了)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
*/
.box {
position: fixed;
/*left: 10px;*/
right: 10px;
/*bottom: 50%;*/
top: calc(50% - 210px);
}
/*响应式布局*/
/*@media (min-width: 1000px) {*/
/*.box {*/
/*position: fixed;*/
/*!*left: 10px;*!*/
/*right: 10px;*/
/*bottom: 10px;*/
/*top: 10px;*/
/*}*/
/*}*/
</style>
</head>
<body>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
</body>
</html>
絶対位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
.sup {
width: 180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
width: 50px;
height: 80px;
background-color: red;
}
/*绝对定位：
1、定位属性值：absolute
2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求：
1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系
2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来
结论：相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/
position: relative;
}
/*body {*/
/*width: 1000px;*/
/*height: 600px;*/
/*position: fixed;*/
/*}*/
/*.sup {*/
/*position: fixed;*/
/*}*/
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
<h3>hhhhhhhhhhhh</h3>
</div>
</body>
</html>