Hiểu về thuộc tính position trong CSS – khi bạn ngoại hình các layout cho website việc chuyển từ file bề ngoài theo định dạng HTML (Hypertext Markdown Language) bạn sẽ buộc phải dùng thuộc tính position trong CSS. Ví dụ như khiến thanh tính năng trên thực đơn, header, v.v. Có thể hiểu nó là thuộc tính xác định dòng của bí quyết định vị trí cho thành phần.
Tìm hiểu về 4 thuộc tính position trong CSS
Tìm hiểu về tính chất position trong CSS
mang thuộc tính position chúng ta sở hữu 5 giá trị chính cần biết :
Static: Đây được xem là giá trị hiển thị Position trong css một cách thức mặc định (default), những thành phần sẽ nằm theo thứ tự của văn bản.
Relative: Định vị trí tuyệt đối cho những thành phần, không gây tác động tới vị trí ban đầu hay những thành phần khác.
Absolute: giá trị này sẽ giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít ra là theo cửa sổ trình phê duyệt. Fixed: Định vị trí hơi cho thành phần theo cửa sổ trình thông qua.
Fixed: Định vị và giúp cho phần tử luôn nhất định 1 chỗ, ví dụ như khi bạn scroll trình thông qua chẳng hạn, phần tử sẽ ko đổi thay.
Inherit: Xác định thừa hưởng thuộc tính trong khoảng thành phần cha (thành phần bao ngoài).
trước hết hãy kể về thuộc tính position relative, absolute và những tính chất cool ngầu khác
tính chất Position Relative
thuộc tính
<span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span> trong CSS giúp Định vị trí tuyệt đối cho các thành phần. Ví dụ:
<span class="pln">selector</span><span class="pun"></span><span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span>
giả dụ bạn sử dụng thuộc tính này thì sẽ phải dùng dĩ nhiên mang những tính chất căn chỉnh tọa độ của thành phần (lưu ý: những giá trị của các thẻ này là chính là đơn vị đo như px). Top: là cách trên, Bottom: là cách thức dưới, Left: là cách thức trái, Right: là cách thức phải. Hãy cùng nhìn qua đoạn code ví dụ sau đây:
<br /> [crayon-6340c1e543840486035321 inline="true" class="language-html hljs prettyprinted"]<span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">meta</span></span> <span class="hljs-attribute"><span class="atn">charset</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"utf-8"</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">meta</span></span> <span class="hljs-attribute"><span class="atn">http-equiv</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"X-UA-Compatible"</span></span> <span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"IE=edge"</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">></span></span><span class="pln">Thuộc tính position trong CSS</span><span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">style</span></span> <span class="hljs-attribute"><span class="atn">type</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"text/css"</span></span> <span class="hljs-attribute"><span class="atn">media</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"screen"</span></span><span class="tag">></span></span><span class="css"><br /> <span class="hljs-tag"><span class="pln">div</span></span> <span class="hljs-rules"><span class="pun"></span><br /> <span class="hljs-rule"><span class="hljs-attribute"><span class="pln">padding</span></span><span class="pun">:</span><span class="hljs-value"> <span class="lit">4</span><span class="hljs-number"><span class="lit">0</span></span><span class="lit">px</span></span></span><span class="pun">;</span><br /> <span class="hljs-rule"><span class="hljs-attribute"><span class="pln">margin</span></span><span class="pun">:</span><span class="hljs-value"> <span class="lit">2</span><span class="hljs-number"><span class="lit">0</span></span><span class="lit">px</span></span></span><span class="pun">;</span><br /> <span class="hljs-rule"><span class="hljs-attribute"><span class="pln">width</span></span><span class="pun">:</span><span class="hljs-value"> <span class="hljs-number"><span class="lit">320</span></span><span class="lit">px</span></span></span><span class="pun">;</span><br /> <span class="hljs-rule"><span class="hljs-attribute"><span class="pln">border</span></span><span class="pun">:</span><span class="hljs-value"> <span class="lit">2px</span><span class="pln"> solid red</span></span></span><span class="pun">;</span><br /> <span class="hljs-rule"><span class="pun"></span></span></span><br /> </span><span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">style</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">></span><span class="pln">TopDev tuyen dung IT hang dau</span></span><span class="pln">.</span><span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">div</span></span> <span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"relative"</span></span><span class="tag">></span><span class="pln">TopDev tuyen dung IT hang dau</span></span><span class="pln">.</span><span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"><</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">></span><span class="pln">TopDev tuyen dung IT hang dau</span></span><span class="pln">.</span><span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">></span></span><br /> <span class="hljs-tag"><span class="tag"></</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">></span><span class="pln">0</span></span>
[/crayon]
Mọi người mang thể test thử và thấy rằng những thẻ hiển thị đúng thứ tự, giờ ta mang thể thêm đoạn CSS vào class relative như sau:
<br /> <span class="pun">.</span><span class="pln">relative </span><span class="pun"></span><span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><br /> <span class="str">/Cách bên trái 260px/</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">left</span><span class="pun">:</span> <span class="lit">260px</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="str">/Cách bên trên 290px/</span><span class="pln"><br /> top</span><span class="pun">:</span> <span class="lit">290px</span><span class="pun">;</span><span class="pln"><br /> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span> <span class="com">#e1ab22; </span><br /> <span class="pun"></span>
Lưu ý, khi bạn bù một vị trí phần tử sở hữu
<span class="pln">position</span><span class="pun">:</span><span class="pln"> <a href="https://chowebs.com/tim-hieu-ve-thuoc-tinh-position-trong-css.html">relative</a></span>, ko gian nó chiếm không chuyển động, vị trí hiện tại của nó sẽ làm cho đổi bố cục xung quanh vị trí đó ko thay đổi…Tưởng tượng như thế này,
<span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span> giống như nhân vật sở hữu khả năng chuyển di tự do, nhưng luôn luôn can hệ đến nơi ban sơ.
Tìm hiểu về 4 tính chất position trong CSS
Đánh giá về tính chất position trong CSS
thuộc tính Position Absolute
Như đã kể ở trên tính chất
<span class="pln">position</span><span class="pun">:</span><span class="pln"> absolute</span> trong CSS với tác dụng giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít ra là theo cửa sổ trình duyệt. Cụ thể hơn, thuộc tính absolute xác định định tọa độ của thành phần theo 1 thẻ cha relative (nếu như với), nếu như không sở hữu thẻ cha thì nó sẽ đi theo body của toàn trang web. Cách tiêu dùng cũng tương tự như
<span class="pln">relative</span>.
Dưới đây là tỉ dụ tương tự như bên trên thay vào đó là thẻ absolute. Cả nhà sẽ thấy rõ rằng lúc chúng ta vận động những thành phần bằng
<span class="pln">absolute</span> thì các thẻ tiếp theo sẽ được đưa lên vị trí mặc định. Bạn mang thể thử ngay nhé.
<br /> <span class="pun">.</span><span class="pln">absolute </span><span class="pun"></span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="str">/Cách bên trái 260px/</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">left</span><span class="pun">:</span> <span class="lit">260px</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="str">/Cách bên trên 290px/</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">top</span><span class="pun">:</span> <span class="lit">290px</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span> <span class="pun">#</span><span class="pln">e1ab22</span><span class="pun">;</span><br /> <span class="pun"></span>
tính chất Position Static
thuộc tính
<span class="pln">position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">static</span>được xem là trị giá mặc định (default) của position. Đây là những giá trị mà dù bạn sở hữu khai báo chúng hay ko khai báo thì những phần tử (element) sẽ tự được sắp đặt vị trí một phương pháp như thông thường trên trang web. Bạn sở hữu thể Nhìn vào tỉ dụ sau
<br /> <span class="tag"><body></span></p> <p><span class="Apple-converted-space"><span class="pln"> </span></span><span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"box-red"</span><span class="tag">></div></span></p> <p><span class="Apple-converted-space"><span class="pln"> </span></span><span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"box-green"</span><span class="tag">></div></span></p> <p><span class="tag"></body></span>
Bạn mang thể thử thêm position static như sau:
tính chất Position Fixed
tính chất thường được các lập trình viên tiêu dùng để định vị 1 thành phần so có window hiển thị của các trình ưng chuẩn. Bạn có thể thấy ví dụ này, khi vào một website nào đấy và bạn thử scroll browser, bạn sẽ thấy menu hay button cứ đứng yên một chỗ không đổi thay thì đấy chính là position fixed. Trị giá này hoàn toàn ko phụ thuộc vào phần tử cha, khi nào scroll trình chuẩn y là nó hoạt động thôi. Bạn mang thể thử tham khảo ví dụ sau đây:
<br /> <span class="pun">.</span><span class="pln">header </span><span class="pun"></span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span> <span class="lit">0px</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">position</span><span class="pun">:</span> <span class="kwd">fixed</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">top</span><span class="pun">:</span> <span class="lit">0px</span><span class="pun">;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">width</span><span class="pun">:</span> <span class="lit">100</span><span class="pun">%;</span><br /> <span class="Apple-converted-space"><span class="pln"> </span></span><span class="pln">background</span><span class="pun">:</span> <span class="com">#e1ab22;</span><br /> <span class="pun"></span>
thuộc tính Position Sticky
Đây là một tính chất tương đối tương đồng mang fixed, bạn sở hữu thể xem nó như một sự phối hợp “lưỡng long nhất thể” của relative và fixed. Vì mang sự lai tạo này nên nó cũng không được hỗ trợ quá đa dạng trong cùng đồng khiến web. Nó cũng không tiêu dùng được trên trình phê chuẩn Internet Explorer cũng như 1 số phiên bản đầu của Edge nên sẽ dễ gây lỗi. Không khuyến khích những lập trình viên dùng
Theo : https://chowebs.com/tim-hieu-ve-thuoc-tinh-position-trong-css.html