position: relative
Lấy một ví dụ
Để bắt đầu, hãy tạo một vùng chứa cha với 4 hộp cạnh nhau.
index.html
<div class="parent"> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div>
CSS
.parent {
border: 2px black dotted;
display: inline-block;
}
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
background: green;
}
Kết quả:
position: static (mặc định)
Điều gì sẽ xảy ra khi chúng tôi muốn di chuyển GreenBox nhưng không muốn ảnh hưởng đến bố cục xung quanh nó?
Position: relative
Chúng ta sẽ sử dụng position: relative
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}
Kết quả:
position:relative
Đây là vị trí tương đối của vị trí. Di chuyển hộp màu xanh lục tương ứng với vị trí hiện tại của nó đến 20px từ bên trái và trên cùng mà không thay đổi bố cục xung quanh nó. Vì vậy, để lại một khoảng trống cho hộp màu xanh lá cây, nơi nó sẽ có được vị trí không giống vị trí ban đầu.
Position: absolute thì ngược lại.
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}
Kết quả:
position: absolute
Bằng cách áp dụng postion:absolute với GreenBox, nó sẽ không để lại bất kỳ khoảng trống nào mà nó đã có. Vị trí của GreenBox dựa trên vị trí gốc của nó (đường viền chấm chấm). Do đó, di chuyển 20px sang trái và dưới từ gốc trên cùng bên trái của đường viền chấm chấm.
Tóm lại…
position:relative của một phần tử liên quan đến vị trí hiện tại của nó mà không thay đổi bố cục xung quanh vị trí đó, trong khi position:absolute của một phần tử liên quan đến vị trí của bố mẹ và thay đổi bố cục xung quanh vị trí đó.
Nguồn: https://techmaster.vn/
BÀI TẬP
Bài 1:
Tài nguyên: Hình ảnh.zip
Code Demo
index.html
<div class="box-outer"> <div class="box"> <div class="top-box"> <div class="sale-off"><span>-20%</span></div> <img src="Img/product-5-1.jpg" alt="hinh san pham"> <h3>This is Title</h3> <span class="sale">60.00$</span> <span>49.00$</span> </div> <div class="left-box"> <p>Compare</p> </div> <div class="right-box"> <p>Add to cart</p> </div> </div> </div>
style.css
/* CSS Document */
*{
padding:0;
margin: 0;
}
/*Reset CSS*/
.box-outer{
width: 850px;
height: 350px;
background: grey;
margin: 50px auto;
}
.box{
width: 200px;
height: 300px;
background: white;;
float: left;
margin-left: 10px;
}
.box .top-box{
width: 200px;
height:250px;
/* background: pink;*/
text-align: center;
position: relative;
border-bottom: 1px solid grey;
}
.top-box img{
width: 200px;
}
.top-box .sale-off{
position: absolute;
width: 50px;
height: 20px;
background: orange;
top:10px;
}
.top-box .hot{
position: absolute;
width: 50px;
height: 20px;
background: orange;
top:40px;
}
.box .left-box{
width: 98px;
height: 50px;
/* background: #00E753;*/
float: left;
border-right: 1px solid grey;
}
.box .right-box{
width: 100px;
height: 50px;
/* background: #0A89FF;*/
float: right;
}
.box p{
text-align: center;
font-size: 15px;
margin-top:15px;
color: #C9C9C9;
}
.top-box .sale{
text-decoration: line-through;
font-size: 10px;
}
Bài 2
Bài 3
Tài nguyên: hinhanh.jpg
Content:
Daniel fernandes
SpecialityTwitch
Email: danielfernandes@gmail.com
Twitter: @Spker_danielfernandes
Phone: +844 123.456.789
Fax: +844 123.456.789