Bincangkan sebab kedudukan tetap tidak boleh digunakan dalam HTML

Perbincangan tentang ketidakupayaan untuk menggunakan kedudukan tetap dalam HTML

Dengan perkembangan pesat Internet, reka bentuk web telah menjadi lebih kompleks dan pelbagai. Dalam reka bentuk web, selalunya perlu menggunakan kedudukan tetap (kedudukan: tetap) untuk mengawal kedudukan elemen supaya halaman boleh mencapai beberapa kesan khas. Walau bagaimanapun, dalam beberapa kes, kedudukan tetap tidak boleh digunakan dalam HTML, menyebabkan pereka banyak sakit kepala. Artikel ini akan meneroka ketidakupayaan untuk menggunakan kedudukan tetap dalam HTML dan memberikan contoh kod khusus.

1. Elemen terapung menyebabkan kedudukan tetap gagal

Dalam HTML, atribut apungan sesuatu elemen akan menyebabkan elemen itu terkeluar daripada aliran teks biasa, yang mungkin menjejaskan penggunaan atribut kedudukan tetap. Apabila elemen menggunakan atribut terapung, selagi elemen adik-beradiknya yang berikutnya turut menggunakan kedudukan tetap, kedudukan tetap akan menjadi tidak sah.

Contoh kod:

<style>
    .float-box {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .fixed-box {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

<div class="float-box"></div>
<div class="fixed-box"></div>

Dalam contoh kod di atas, elemen .float-box mempunyai atribut terapung yang digunakan dan elemen .fixed-box mempunyai tetapan atribut kedudukan digunakan. Walau bagaimanapun, disebabkan kehadiran unsur terapung, kedudukan tetap gagal. Tidak kira bagaimana kami melaraskan atribut atas dan left elemen .fixed-box, kami tidak boleh menukar kedudukannya. .float-box元素应用了浮动属性，.fixed-box元素应用了固定定位属性。然而，由于浮动元素的存在，固定定位失效了。无论我们怎样调整.fixed-box元素的top和left属性，都无法改变其位置。

解决办法：

要解决这个问题，可以在浮动元素后面添加一个空的<div>元素，并给这个<div>元素应用clear: both属性。这样可以清除浮动元素的影响，确保后续的固定定位元素正常显示。

代码示例：

<style>
    .float-box {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .fixed-box {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .clear-fix {
        clear: both;
    }
</style>

<div class="float-box"></div>
<div class="clear-fix"></div>
<div class="fixed-box"></div>

二、包含块的限制导致固定定位失效

在HTML中，固定定位元素的位置根据其包含块（containing block）进行计算。包含块是固定定位元素的最近的已定位祖先元素，它可以是任意带有定位属性（position: relative, position: fixed或position: absolute）的元素，或者是文档的初始包含块。包含块的限制可能会导致固定定位失效。

代码示例：

<style>
    .parent-box {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: yellow;
    }

    .fixed-box {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

<div class="parent-box">
    <div class="fixed-box"></div>
</div>

在上述代码示例中，.parent-box元素是一个带有定位属性的祖先元素。然而，由于.parent-box元素本身也是一个块级元素，固定定位元素.fixed-box的包含块限制在.parent-box内部。这意味着.fixed-box元素的固定定位可能仅适用于.parent-box的显示区域，而无法超出这个范围。

解决办法：

要解决这个问题，可以在.parent-box元素之外创建一个新的定位元素作为包含块，以确保固定定位元素的位置计算是相对于整个文档的。这样可以解除包含块的限制，使得固定定位生效。

代码示例：

<style>
    .parent-box {
        width: 300px;
        height: 300px;
        background-color: yellow;
    }

    .fixed-box {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .fixed-container {
        position: relative;
    }
</style>

<div class="fixed-container">
    <div class="parent-box">
        <div class="fixed-box"></div>
    </div>
</div>

通过在.fixed-container元素上应用position: relative定位属性，我们创建了一个新的包含块，使得固定定位元素.fixed-box的包含块变为整个文档。这样，.fixed-box

Penyelesaian:

Untuk menyelesaikan masalah ini, anda boleh menambah elemen <div> kosong selepas elemen terapung dan gunakan pada elemen <div> ini jelas: kedua-duanya atribut. Ini boleh membersihkan kesan unsur terapung dan memastikan elemen kedudukan tetap berikutnya dipaparkan secara normal. 🎜🎜Contoh kod: 🎜rrreee🎜2 Sekatan blok yang mengandungi menyebabkan kedudukan tetap gagal🎜🎜Dalam HTML, kedudukan elemen kedudukan tetap dikira berdasarkan blok yang mengandunginya. Blok yang mengandungi ialah nenek moyang kedudukan terdekat bagi elemen kedudukan tetap, yang boleh menjadi mana-mana elemen dengan atribut kedudukan (kedudukan: relatif, kedudukan: tetap atau kedudukan : mutlak) elemen, atau blok awal yang mengandungi dokumen. Sekatan untuk mengandungi blok boleh menyebabkan kedudukan tetap gagal. 🎜🎜Contoh Kod: 🎜rrreee🎜Dalam contoh kod di atas, elemen .parent-box ialah elemen ancestor dengan atribut kedudukan. Walau bagaimanapun, oleh kerana elemen .parent-box itu sendiri juga merupakan elemen peringkat blok, blok yang mengandungi elemen kedudukan tetap .fixed-box adalah terhad kepada .parent-boxcode>Dalaman. Ini bermakna bahawa kedudukan tetap elemen .fixed-box hanya boleh digunakan pada kawasan paparan .parent-box dan tidak melebihi julat ini. 🎜🎜Penyelesaian: 🎜🎜Untuk menyelesaikan masalah ini, anda boleh mencipta elemen kedudukan baharu sebagai blok yang mengandungi di luar elemen .parent-box untuk memastikan pengiraan kedudukan elemen kedudukan tetap adalah relatif kepada keseluruhan Dokumentasi. Ini mengalih keluar sekatan blok yang mengandungi dan membenarkan kedudukan tetap berkuat kuasa. 🎜🎜Contoh Kod: 🎜rrreee🎜Dengan menggunakan atribut penentududukan relative pada elemen .fixed-container, kami mencipta blok mengandungi baharu yang menjadikan elemen tetap mengandungi blok .fixed-box menjadi keseluruhan dokumen. Dengan cara ini, kedudukan tetap elemen .fixed-box boleh berkuat kuasa seperti biasa. 🎜🎜Ringkasnya, masalah kedudukan tetap tidak boleh digunakan dalam HTML terutamanya termasuk kegagalan kedudukan tetap yang disebabkan oleh unsur terapung dan pengehadan blok yang mengandungi. Dengan melaraskan struktur dan gaya HTML dengan sewajarnya, kami boleh menyelesaikan masalah ini dan memastikan bahawa penggunaan atribut kedudukan tetap berkuat kuasa seperti biasa. 🎜