Absolute và Relative

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

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

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