Tin tức

Nhìn kem ly để hiểu về CSS Position

CSS Position vốn là thứ không phải ai cũng hiểu được một cách cụ thể rõ ràng. Tuy nhiên nếu bạn đã từng làm hoặc nhìn ly kem và có một chút đầu óc tưởng tượng, việc học về CSS Position sẽ dễ dàng hơn rất nhiều Chúng ta sẽ giải thích các giá trị position sau:

Absolute
Static (default)
Fixed
Relative

dựa vào các yếu tố của 1 ly kem là

Ly
Các lớp kem
Kem topping (lớp kem trên cùng tất cả các lớp)
Quả cherry

htmlicecream Nếu tưởng tượng các dòng code HTML như 1 ly kem thì nó trông sẽ như thế này:

<body>
	<div class='fullSundae'>
	<div class='cherry'></div>
	<div class='whippedCream'></div>
	<div class='iceCreamScoop'></div>
	<div class='iceCreamScoop'></div>
	<div class='glass'>
	<div class='iceCreamScoop'></div>
	<div class='iceCreamScoop'></div>
	<div class='iceCreamScoop'></div>
	</div>
	</div>
</body>

Hoặc như hình ảnh này:

icecreamhtml

Trước khi viết CSS, chúng ta sẽ quan sát một chút:

Số lượng kem sẽ phụ thuộc vào chiều cao của ly. Chúng ta không thể xếp chồng kem mãi được, không thì đến một lúc nào đấy chúng sẽ đổ
Bạn có thể để quả cherry lúc nào tùy ý muốn. Quả cherry nhỏ hơn, có thể vừa chỗ nhỏ. Và có nhiều quả cherry đi chăng nữa thì sẽ không làm đảo lộn thứ tự của các lớp kem
Kem topping thì để ở trên, bất kể có bao nhiêu lớp kem đi chăng nữa thì tôi vẫn chưa nhìn thấy người ta để topping ở giữa cả

Sau đây chúng ta sẽ đi vào giải thích từng phần:

Giá trị Relative/Static: Cái ly và các lớp kem

Ở ảnh minh họa trên, cái ly chỉ chứa được nhiều nhất 5 lớp kem, nếu không cả ly kem sẽ bị đổ. Giả dụ như 5 lớp kem đó có giá trị là 500 px, và các lớp nằm chồng lên nhau. Div fullSundae trong trường hợp đó sẽ có chiều cao là 500px để chỉ rõ là nó chỉ có thể chứa 5 nhiều nhất là 5 lớp kem, không hơn. Đây là ví dụ về vị trí mặc định, static. Chúng ta sử dụng chúng để cho thấy rằng chiều cao div không liên quan đến container div nào. Bởi vì cái ly chỉ chứa được 3 trong 5 muỗng kem, và mỗi muỗng kem đều bằng nhau, chúng ta có thể thấy div glass (ly) bằng 60% chiều cao của div fullSundae (toàn bộ kem ly). Đây là cơ hội để dùng position relative! Bạn có thể chỉnh div glass (ly) thành position relative và chuyển chiều cao của nó thành 60%. Div glass (ly) sẽ xem xét toàn bộ chiều cao của div fullSundae (toàn bộ kem ly) rồi chiếm 60% chiều cao của nó. Phần trăm này là tương đối so với chiều cao của div container, mà nó được chỉnh chính xác là 500px Ví dụ thêm, nếu bạn đặt mỗi iceCreamScoop (lớp kem) ở trong một div glass thành position relative, mỗi lớp sẽ tự tính chiều cao của chính nó dựa trên chiều cao của div glass. Một ly có thể vừa 3 muỗng kem, nên mỗi muỗng kem nên có chiều cao là 33,3%. Đây là code ví dụ:

.fullSundae{
	height:500px;
	position:static;
	}

.fullSundae > .iceCreamScoop	{
	height:100px;
	}

.glass	{
	position:relative;
	height:60%;
	}

.glass .iceCreamScoop	{
	height: 33.3%;
	position:relative;
	}

Position Fixed: Kem topping

Vị trí cố định là vị trí dễ nhất. Một element với vị trí cố định sẽ cố định ở một chỗ dù phần body có kéo dài ra bao nhiêu. Trong kem ly, đây là phần kem đánh ở trên. Không cần biết có bao nhiêu muỗng kem thì phần kem đánh sẽ luôn ở phía trên. Nó được đặt ở vị trí cố định so với body, chứ không phải so với div chứa nó 1-lp3ssuqhcv9zq_xesfjgbw Như hình trên ta có thể thấy được rằng phần kem topping độc lập với các lớp kem còn lại. Nói cách khác, số lượng kem phía dưới không ảnh hưởng tới vị trí của lớp kem topping mà nó luôn ở một vị trí cố định trên trang. Ví dụ cụ thể của Position Fixed thường là thanh navbar. Đó là những element sẽ cố định ở một chỗ, kể cả khi bạn cuộn trang thì thanh navbar vẫn nằm cố định trên màn hình.

Position Absolute: Quả cherry

Bạn có thể đặt những quả cherry ở bất cứ đâu trong ly kem này, kể cả ở trên cùng hay bên cạnh các lớp kem trong ly mà ly kem sẽ không bao giờ bị đổ. Điều này thể hiện đặc tính của Position Absolute: chúng không phụ thuộc vào các quy luật của position relative và fixed. Hơn nữa, bạn có thể bỏ chúng mà không làm lộn xộn các element khác. Điều quan trọng là mặc dù Element có position absolute không làm lộn xộn các position của các element khác, nhưng bạn phải đặt vị trí của chúng một cách rõ ràng. Nếu không, chúng mặc định chạy vào góc trên bên trái của phần body. Hoặc, nếu một trong parents của chúng có vị trí relative, chúng sẽ đi vào góc cao bên trái của div đó. 1-zoroau2rrzf5idhuz-xmtg Hãy nhìn cốc kem ly này. Có những quả cherry ở một loạt các điểm khác nhau nhưng chúng không làm lộn xộn các yếu tố khác. Đặc biệt, hãy nhớ rằng bạn không thể xếp chồng các quả cherry như bạn xếp chồng các lớp kem. Cherries không chồng được. Bạn phải đặt mỗi một cái một chỗ rõ ràng. Một lưu ý cuối cùng: vị trí absolute được đặt ở vị trí so với parent không có vị trí static gần nhất. Nếu mỗi parrent đều static, nó sẽ được đặt ở vị trí so với thẻ body. Vì vậy, trong trường hợp trên, quả cherry ở trong ly được định vị dựa trên vị trí của div glass, chứ không phải của div fullSundae. Div glass có vị trí relative. Nếu vẫn cảm thấy quá khó hiểu, hãy thử thực hành với CSS position dựa trên tutorial có thể tương tác được này!