定位

绝对定位

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.div1{height: 200px;width: 200px;background-color: gray;/*绝对定位 基于父级标签原点移开以后会自动释放父级标签原点位置*/position: absolute;top: 100px;left: 100px;}.div2{height: 200px;width: 200px;background-color: burlywood;position: absolute;top: 400px;left: 400px;}</style></head><body><div class="div1">1</div><div class="div2">2</div></body>
</html>

相对定位

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.div1{height: 200px;width: 200px;background-color: gray;/*相对定位  相对于自身原来的位置,移开之后,不会释放原点位置*/position: relative;top: 100px;left: 100px;}.div2{height: 200px;width: 200px;background-color: burlywood;position: relative;top: 100px;left: 100px;}</style></head><body><div class="div1">1</div><div class="div2">2</div></body>
</html>

相对浏览器窗口定位

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.div1{height: 200px;width: 200px;background-color: yellow;position: absolute;top: 0px;left: 0px;}.div2{height: 200px;width: 200px;background-color: burlywood;/*相对浏览器窗口定位*/position: fixed;top: 100px;left: 100px;}</style></head><body><div class="div1">1</div><div class="div2">2</div></body>
</html>

定位案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.note{/*border: 1px solid red;*/width: 50px;height: 395px;position: fixed;right: 0px;top: 150px;}.note_item1{height: 86px;width: 50px;margin-bottom:5px;}.note_item2{height: 122px;width: 50px;}</style></head><body><div class="note"><div class="note_item1"><img src="img/note1.png" /></div><div class="note_item1"><img src="img/note2.png" /></div><div class="note_item1"><img src="img/note3.png" /></div><div class="note_item2"><img src="img/note4.png" /></div></div>br*100</body>
</html>