Trong CSS, khi di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần tử bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ sử dụng margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.
Vậy nếu như muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính position. Cái tên nói lên tất cả, position là thuộc tính giúp tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.
Các giá trị của thuộc tính position
Hiện tại position hỗ trợ cho một số giá trị như sau:
relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.
absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.
fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
static: Đưa phần tử về hiển thị theo kiểu mặc định.
Sau khi thiết lập một phần tử sử dụng position, chúng ta sẽ sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của nó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:
top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.
bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.
left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.
right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.
Ví dụ về kiểu relative
Ở ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản.
HTML
<img src="https://i.imgur.com/odWztph.jpg" width="250px" height="auto" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus. Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
CSS
img {
position: relative;
top: 85px;
left: 85px;
/* Không cần quan tâm */
border: 1px solid #333;
padding: 2px;
}
Ví dụ về kiểu absolute
Với absolute, mình phải có một phần tử mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa các thuộc tính position về giá trị là 0 thì nó vẫn nằm trong phần tử mẹ.
HTML
<div id="container">
<div id="relative">
<img src="https://i.imgur.com/odWztph.jpg" id="absolute" width="150px" height="auto" />
</div>
</div>
CSS
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #e6e6e6;
border: 1px solid #333;
padding: 15px;
}
#relative{
width: 100%;
border: 1px solid #333;
background-color: red;
height: 300px;
position: relative;
}
#absolute {
position: absolute;
right: 0;
bottom: 0;
}
Ví dụ về kiểu fixed
Ở ví dụ này, mình sẽ tạo ra một cái danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn.
HTML
<ul id="menu">
<li>Trang chủ</li>
<li>Diễn đàn</li>
<li>Tin tức</li>
<li>Liên hệ</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>
<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
<p>Sed porta finibus erat, non molestie odio fringilla eu. In hac habitasse platea dictumst. Nunc pharetra, ipsum in laoreet tincidunt, libero ligula bibendum ipsum, vitae aliquam lectus ante rutrum quam. Sed non nunc laoreet, sagittis nisi at, dignissim orci. Sed pharetra sed lacus a suscipit. Aenean efficitur risus magna, eget ornare orci lobortis non. Phasellus suscipit posuere velit, et interdum metus rhoncus at. Morbi lobortis malesuada enim, nec laoreet erat semper ut. Nunc vitae urna augue.</p>
<p>Duis quis magna quis mi tristique imperdiet. Quisque ac odio sagittis, pulvinar augue id, tincidunt sapien. Aenean turpis odio, sollicitudin sed dictum sed, tincidunt non nulla.</p>
CSS
body {
width: 960px;
margin: 0 auto;
}
#menu {
padding: 0 32px;
margin: 0;
width: 500px;
position: fixed;
background: #334793;
color: #fff;
}
#menu li {
line-height: 2em;
margin-right: 15px;
list-style-type: none;
display: inline;
}