Computer >> Máy Tính >  >> Lập trình >> CSS

Các yếu tố định vị CSS

Thuộc tính vị trí được sử dụng để định vị một phần tử. tức là sau đây là các yếu tố định vị -

  • tĩnh - Hộp phần tử được bố trí như một phần của luồng tài liệu thông thường, theo sau phần tử đứng trước và phần tử đứng sau.

  • tương đối - Hộp của phần tử được bố trí như một phần của luồng thông thường, và sau đó bù lại một khoảng cách nào đó.

  • tuyệt đối - Hộp của phần tử được bố trí liên quan đến khối chứa của nó và hoàn toàn bị xóa khỏi dòng thông thường của tài liệu.

  • đã cố định - Hộp của phần tử được định vị tuyệt đối, với tất cả các hành vi được mô tả cho vị trí:tuyệt đối.

Sau đây là mã để định vị các phần tử bằng CSS -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   color: white;
   text-align: center;
   height: 100px;
   width: 100px;
}
.static {
   position: static;
   background-color: greenyellow;
}
.relative {
   position: relative;
   left: 50px;
   background-color: rgb(255, 47, 47);
}
.absolute {
   position: absolute;
   right: 50px;
   top: 20px;
   background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Các yếu tố định vị CSS