Đánh giá về 4 tính chất position trong CSS
Hiểu về tính chất position trong CSS – khi bạn ngoại hình các layout cho website việc chuyển trong khoảng file mẫu mã theo định dạng HTML (Hypertext Markdown Language) bạn sẽ bắt buộc tiêu dùng thuộc tính position trong CSS. Tỉ dụ như khiến thanh tính năng trên thực đơn, header, v.v. Với thể hiểu nó là tính chất xác định mẫu của phương pháp đị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
với thuộc tính position chúng ta mang 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 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 các thành phần, ko gây ảnh hưởng đến vị trí ban đầu hay các thành phần khác.
Absolute: trị giá 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 nhất là theo cửa sổ trình phê chuẩn. Fixed: Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.
Fixed: Định vị và tạo điều kiện cho phần tử luôn khăng khăng 1 chỗ, tỉ dụ như khi bạn scroll trình phê duyệt chẳng hạn, phần tử sẽ không đổi thay.
Inherit: Xác định được hưởng thuộc tính trong khoảng thành phần cha (thành phần bao ngoài).
trước nhất hãy nói về tính chất position relative, absolute và những thuộc tính cool ngầu khác
thuộc tính Position Relative
tính chất
<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>
nếu như bạn tiêu dùng thuộc tính này thì sẽ phải sử dụng dĩ nhiên với các 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à doanh nghiệp đo như px). Top: là bí quyết trên, Bottom: là cách thức dưới, Left: là phương pháp trái, Right: là bí quyết phải. Hãy cộng nhìn qua đoạn code tỉ 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 sở hữu thể test thử và thấy rằng những thẻ hiển thị đúng quy trình, 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>, không gian nó chiếm ko chuyển động, vị trí ngày nay của nó sẽ khiến cho đổi bố cục xung quanh vị trí đấy 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 vận động tự do, nhưng luôn luôn can dự đến nơi ban sơ.
Đánh giá về 4 tính chất position trong CSS
Tìm hiểu về thuộc tính position trong CSS
tính chất Position Absolute
Như đã nhắc ở trên thuộc tính
<span class="pln">position</span><span class="pun">:</span><span class="pln"> absolute</span> trong CSS sở hữu 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 nhất là theo cửa sổ trình ưng chuẩn. Cụ thể hơn, tính chất absolute xác định định tọa độ của thành phần theo 1 thẻ cha relative (nếu sở hữu), ví như không có thẻ cha thì nó sẽ đi theo body của toàn trang web. Cách dùng cũng như vậy như
<span class="pln">relative</span>.
Dưới đây là ví dụ tương tự như bên trên thay vào ấy là thẻ absolute. Cả nhà sẽ thấy rõ rằng lúc chúng ta di chuyển các 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 với 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>
thuộc tính Position Static
tính chất
<span class="pln">position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">static</span>được xem là giá trị 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 xếp vị trí 1 phương pháp như thường ngày trên trang web. Bạn có thể Nhìn vào ví 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:
thuộc tính Position Fixed
thuộc tính thường được những lập trình viên sử dụng để định vị 1 thành phần so sở hữu window hiển thị của các trình thông qua. Bạn có thể thấy tỉ dụ này, lúc vào một website nào đó và bạn thử scroll browser, bạn sẽ thấy menu hay button cứ đứng yên ổn 1 chỗ ko thay đổi thì đó chính là position fixed. Giá trị này hoàn toàn không phụ thuộc vào phần tử cha, khi nào scroll trình phê duyệt là nó hoạt động thôi. Bạn với thể thử tham khảo tỉ 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à 1 tính chất tương đối tương đồng mang fixed, bạn có thể xem nó như một sự phối hợp “lưỡng long nhất thể” của relative và fixed. Vì với sự lai tạo này nên nó cũng ko được hỗ trợ quá đa dạng trong cộng đồng khiến cho web. Nó cũng không tiêu dùng được trên trình thông qua Internet Explorer cũng như một 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
Nhận xét
Đăng nhận xét