固定定位position:fixed
/*固定定位
1、定位屬性值：fixed
2、在頁面中不再占位(浮起來了)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能參與布局
4、固定定位的參考系是頁面窗口(不是頁面中的哪一點，而是四邊參照四邊)
5、左右同時存在，取左；同理上下取上
*/
<style>
body{
/*min-width設置區域的最小寬度，如果最小寬度超過頁面的像素
那么頁面就會有橫向滾動條*/
/*min-width: 2000px;*/
}
.fix{
position: fixed;
width: 200px;
height: 300px;
right: 10px;
background: #ff5e28;
text-align: center;/*設置水平居中*/
line-height: 300px;/*設置垂直居中，因為默認文字顯示在行中間*/
top:calc(50% - 150px);
}
</style>
<body>
<div class="fix"><div class="word">這是固定定位</div></div>
</body>
絕對定位
calc（a - b）:的作用是可以在括號內進行像素和百分比的加減
比如：margin：20px calc（50% - 20px）
calc（）內運算符號的兩邊一定要有空格
<!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>
絕對定位中，如果父級沒有絕對或者相對定位，那么繼續往上層找，如果都沒有則根據body進行定位。
相對定位
相對定位只要作用是給輔助子級的絕對定位提供一個參照物。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相對定位</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
h1 {
margin: 0;
}
/*相對定位：
1、定位屬性值：relative
2、在頁面中依舊占位，完全保留之前的所有布局
3、一旦定位后，定位的布局方位 top、bottom、left、right都能參與布局
4、相對定位的參考系是自身原有位置(當前位置)(不是自身中的哪一點，而是四邊參照四邊)
5、左右同時存在，取左；同理上下取上，布局移動后，也不影響自身原有位置(兄弟布局也不會變化)
作用：輔助於子級的絕對定位布局，一般不用於自身布局
*/
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}
</style>
</head>
<body>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
</body>
</html>
overflow屬性
用來處理超出區域的內容如何顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow屬性</title>
<style>
.box {
width: 200px;
height: 300px;
background-color: pink;
}
/*
1）默認子級(內容)超出父級顯示區域，不會做任何處理(正常顯示)
2）overflow: hidden; - 隱藏超出的內容
3）overflow: scroll; - 以滾動方式顯示內容(一定會預留滾動條的占位)
4）overflow: auto; - 有超出內容才以滾動方式顯示
*/
.box {
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂芬納士大夫士大夫四大哈斯蒂
</div>
</body>
</html>