Mengapakah kedudukan tetap tidak dibenarkan dalam HTML? Analisis punca-html tutorial-php.cn

Mengapakah kedudukan tetap tidak dibenarkan dalam HTML? Analisis punca

PHPz

Lepaskan： 2023-12-28 18:14:06

asal

670 orang telah melayarinya

Mengapakah kedudukan tetap tidak dibenarkan dalam HTML? Analisis punca

Mengapa kedudukan tetap tidak boleh digunakan dalam HTML?

Kedudukan tetap (kedudukan tetap) ialah kaedah penentududukan dalam CSS yang membolehkan elemen mempunyai kedudukan tetap dalam tetingkap penyemak imbas, tidak kira bagaimana pengguna menatal halaman. Walau bagaimanapun, aplikasi kedudukan tetap dalam HTML adalah terhad, dan masalah yang berbeza mungkin berlaku dalam elemen dan senario yang berbeza. Seterusnya, kami akan menganalisis mengapa kedudukan tetap tidak boleh digunakan dalam HTML dan memberikan contoh kod khusus untuk memudahkan pemahaman.

Pertama sekali, ciri teras kedudukan tetap ialah elemen diposisikan secara relatif kepada tetingkap penyemak imbas, bukan relatif kepada elemen lain dalam aliran dokumen. Kedudukan ini boleh mengakibatkan reka letak halaman mengelirukan atau bertindih dalam beberapa kes. Pertimbangkan contoh berikut:

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mencipta elemen <div> kedudukan tetap dan meletakkannya di penjuru kiri sebelah atas halaman. Walau bagaimanapun, kerana elemen diletakkan dalam cara yang tetap, ia mengatasi aliran dokumen biasa dan menghalang kandungan lain daripada dibentangkan dengan betul. Dalam contoh ini, <div id="mainContent"> akan bertindih dengan <div id="fixedDiv"> dan kandungan utama halaman akan bertudung . <div>元素，并将其放置在页面的左上角。然而，由于该元素的定位方式是固定的，它会覆盖正常的文档流，导致其他内容无法正确布局。在本例中，<div id="mainContent">将与<div id="fixedDiv">重叠，页面的主要内容将被覆盖。

其次，固定定位可能导致屏幕尺寸较小的设备上的显示问题。在移动设备中，用户通常会使用手指滚动页面，这可能会与固定定位的元素产生冲突。例如：

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

Salin selepas log masuk

在上述示例中，我们将固定定位的<div>元素放置在页面的右下角。然而，当用户在移动设备上滚动页面时，固定定位的元素可能会遮挡页面的内容，使用户难以浏览页面。这种情况下，固定定位不仅无法提供好的用户体验，而且会导致页面布局混乱。

因此，HTML中不能直接使用固定定位。然而，通过一些技巧和组合应用其他CSS属性，我们仍然可以实现类似于固定定位的效果。一种常用的方法是使用position: sticky;

Kedua, kedudukan tetap boleh menyebabkan isu paparan pada peranti dengan saiz skrin yang lebih kecil. Pada peranti mudah alih, pengguna sering menggunakan jari mereka untuk menatal, yang boleh bercanggah dengan elemen kedudukan tetap. Contohnya: rrreee
Dalam contoh di atas, kami meletakkan elemen <div> kedudukan tetap di penjuru kanan sebelah bawah halaman. Walau bagaimanapun, apabila pengguna menatal halaman pada peranti mudah alih, elemen kedudukan tetap mungkin mengaburkan kandungan halaman, menjadikannya sukar bagi pengguna untuk menavigasi halaman. Dalam kes ini, kedudukan tetap bukan sahaja gagal memberikan pengalaman pengguna yang baik, tetapi juga membawa kepada reka letak halaman yang mengelirukan. 
Oleh itu, kedudukan tetap tidak boleh digunakan secara langsung dalam HTML. Walau bagaimanapun, dengan beberapa helah dan gabungan menggunakan sifat CSS lain, kami masih boleh mencapai sesuatu yang serupa dengan kedudukan tetap. Pendekatan biasa ialah menggunakan atribut position: sticky;, yang meletakkan elemen relatif kepada induknya dan kekal dalam kawasan yang boleh dilihat. Di samping itu, kesan serupa boleh dicapai menggunakan teknik seperti reka letak penyesuaian dan pertanyaan media untuk menyesuaikan diri dengan peranti bersaiz berbeza dan persekitaran penyemak imbas yang berbeza. 
Ringkasnya, walaupun kedudukan tetap mempunyai beberapa keperluan kedudukan khas, aplikasinya dalam HTML adalah terhad. Oleh itu, kami perlu menyelesaikan masalah susun atur halaman dan kedudukan melalui sifat dan teknologi CSS lain untuk mencapai pengalaman pengguna yang lebih baik. 
Rujukan: 
🎜MDN Web Documentation: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position🎜🎜CSS-Tricks: https://css-tricks.com/almanac / hartanah/p/jawatan/🎜🎜