- 方位名稱：
left right top bottom - 1）靜態(tài)定位
靜態(tài)定位就是元素標準流的顯示方式兜畸。
div{
width: 100px;
height: 100px;
background-color: red;
position: static; 靜態(tài)定位
left: 300px; 距離左邊300px
}
沒有向左移動300px（left: 300px; ）
-
2）絕對定位
1，當給一個單獨的元素設(shè)置絕對定位拷泽，以瀏覽器左上角為基準定位疫鹊。
2袖瞻，當盒子發(fā)生嵌套關(guān)系的時候，如果父盒子沒有設(shè)置定位拆吆，子盒子設(shè)置定位看瀏覽器的左上角聋迎。
3，當盒子發(fā)生嵌套關(guān)系的時候枣耀，如果父盒子設(shè)置了定位霉晕，子盒子設(shè)置定位以父盒子的左上角為準。
4奕枢，給盒子設(shè)置了絕對定位娄昆，該盒子不占位置（脫離了標準流）
5，給行內(nèi)元素設(shè)置絕對定位后缝彬，改元素轉(zhuǎn)換為行內(nèi)塊元素（第三種轉(zhuǎn)換方式）
6，設(shè)置了絕對定位的盒子如果沒有給它設(shè)置寬度哺眯，它就會自己內(nèi)容的寬度谷浅，要想是整個屏幕的寬度就要設(shè)置width: 100%;div{width: 500px; height: 500px; background-color: red; position: absolute; left: 100px; /* top: 100px; right: 0px; */ } .one{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 600px; } </style> </head> <body> <div > <div class="one"></div> </div> 4）相對定位
1，元素設(shè)置了相對定位后占原來的位置奶卓。
2一疯，設(shè)置相對定位以自己的位置為參照。
3夺姑，不能將行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素墩邀。
4，有一種用途：子元素絕對定位盏浙，父元素相對定位眉睹。子元素就可以相對父元素移動。
.one{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 10px;
}
.two{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
- 5）固定定位
1,不占位置（脫標）
div{
position: fixed;
}