固定定位
<!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>