Rumah hujung hadapan web tutorial css 如何解决移动端fixed元素不显示的问题

如何解决移动端fixed元素不显示的问题

Aug 02, 2018 am 10:44 AM
css html5

这篇文章给大家介绍的内容是关于如何解决移动端fixed元素不显示的问题,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

上几周给公司app做了一个html5嵌套页面,页面并不复杂,展示内容较多,底部有footer

html结构如下

<style>
  .main{
    position: absolute;
    top: 0;
    bottom: 88px;
    left: 0;
    width: 100%;
    overflow-y: auto;
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
<style>
<body>
  <div class="main">
    ...
  </div>
  <footer></footer>
</body>

内容调试完成后插入了一些其他项目的事,后来app开发告诉我要监听页面scroll让我不要用定位布局。我看页面上没有可以输入的地方,不会出现fixed元素乱跑的事情。于是main部分改成了普通布局,然后就出了bug:
安卓上一切正常,IOS10上有时进入页面的时候footer不显示,拖拽或者双击之后才会显示(其他版本的IOS测试说有的又是正常的)

遇到这个问题第一个想法就是把footer的z-index调高,设置到1000,结果无用。仔细观察不显示的页面他们的内容部分都很短,没有撑到footer的位置,猜想是body高度问题,给body加上样式调试

background: #fafafa;
min-height: 100vh;

整个页面背景确实变灰了,但是footer依旧不显示

和同事讨论之后,猜测是手机渲染出了层级问题,一开始footer没有渲染出来,click或者touchmove之后页面重新渲染footer就正常了。
当时已经临近上线了,为了尽快解决bug不折腾,给footer设置了tanslateZ,这样相当于创建了一个独立的层级

-webkit-transform: translateZ(1px)
transform: translate(1px)

页面上还有1个弹层设置了z-index,footer有了translate弹层覆盖不住,说明tranzlateZ层级更高。弹层设置了translateZ(2px)就正常了
这个方法不太优雅,但好处在不改变布局,情况紧急的时候下还是适用的

相关文章推荐:

css中圣杯布局和双飞翼布局的介绍(附代码)

css中如何实现浮动的元素换行

Atas ialah kandungan terperinci 如何解决移动端fixed元素不显示的问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Skop pembolehubah PHP dijelaskan
4 minggu yang lalu By 百草
Petua untuk menulis komen php
4 minggu yang lalu By 百草
Mengulas kod dalam php
4 minggu yang lalu By 百草

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1510
276
Apakah aplikasi perdagangan mata wang maya? Apakah aplikasi perdagangan mata wang maya? Aug 08, 2025 pm 06:42 PM

1. Binance terkenal dengan jumlah transaksi yang besar dan pasangan perdagangan yang kaya. Ia menyediakan model perdagangan yang pelbagai dan ekosistem yang sempurna. Ia juga memastikan keselamatan aset pengguna melalui dana SAFU dan teknologi keselamatan berganda dan sangat penting untuk operasi yang mematuhi; 2. Okx Ouyi menyediakan pelbagai perkhidmatan perdagangan aset digital dan model akaun perdagangan bersatu, secara aktif menyebarkan medan Web3, dan meningkatkan keselamatan dan pengalaman transaksi melalui kawalan risiko yang ketat dan pendidikan pengguna; 3. Gate.io Sesame membuka pintu dan mempunyai kelajuan mata wang yang baik dan mata wang yang kaya, menyediakan alat perdagangan yang pelbagai dan perkhidmatan nilai tambah, mengamalkan pelbagai mekanisme pengesahan keselamatan dan mematuhi ketelusan rizab aset untuk meningkatkan kepercayaan pengguna; 4. Huobi menyediakan perkhidmatan aset digital sehenti dengan pengumpulan industri yang mendalam, dengan kedalaman urus niaga yang kuat dan

Cara menggunakan harta penapis di CSS Cara menggunakan harta penapis di CSS Aug 11, 2025 pm 05:29 PM

Thecssfilterpropertyallowsvisualeffectslebur, kecerahan, andgrayscaletobeapplieddirectlytoHtmlelements.1) usethesyntaxfilter: filter-function (nilai) toapplyeffect.2) combinemultipleFileSwithswithswith, E.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.

Cara membuat garis menegak dengan CSS Cara membuat garis menegak dengan CSS Aug 11, 2025 pm 12:49 PM

Gunakan div dengan sempadan untuk membuat garis menegak dengan cepat, dan tentukan gaya dan ketinggian dengan menetapkan sempadan dan ketinggian; 2. Penggunaan :: Sebelum atau :: Selepas elemen pseudo untuk menambah garis menegak tanpa tag HTML tambahan, sesuai untuk pemisahan hiasan; 3. Dalam susun atur Flexbox, dengan menetapkan warna lebar dan latar belakang kelas pembahagi, pembahagi menegak adaptif antara bekas elastik dapat dicapai; 4. Dalam cssgrid, masukkan garis menegak sebagai lajur bebas (seperti lajur autowidth) ke dalam susun atur grid, yang sesuai untuk reka bentuk responsif; Kaedah yang paling sesuai harus dipilih mengikut susun atur khusus untuk memastikan strukturnya mudah dan mudah dijaga.

Apakah atribut readonly dalam HTML5? Apakah atribut readonly dalam HTML5? Aug 08, 2025 am 11:55 AM

Thereadonlyattributeinhtml5makesforminputsnon-edicitableWhilestillallowingsubmissionanduserInterAction; 1.itappliestoandelements; 2.ISAbooleanattribute, segera "readonly" needstobepresent; 3. tidak disengajakan ", itallowsfocusandthedthedataisandthedata

Cara menggunakan pemilih CSS dengan berkesan Cara menggunakan pemilih CSS dengan berkesan Aug 11, 2025 am 11:12 AM

Apabila menggunakan pemilih CSS, pemilih spesifik rendah harus digunakan terlebih dahulu untuk mengelakkan batasan yang berlebihan; 1. Memahami tahap kekhususan dan gunakannya dengan munasabah dalam urutan jenis, kelas, dan ID; 2. Gunakan nama kelas pelbagai tujuan untuk meningkatkan kebolehgunaan dan kebolehkerjaan; 3. Gunakan atribut dan pemilih kelas pseudo untuk mengelakkan masalah prestasi; 4. Pastikan pemilih pendek dan jelas skop; 5. Gunakan BEM dan spesifikasi penamaan lain untuk meningkatkan kejelasan struktur; 6. Elakkan penyalahgunaan pemilih tag dan: anak-anak, dan memberi keutamaan kepada penggunaan kelas alat atau CSS modular untuk memastikan gaya itu dapat dikawal untuk masa yang lama.

CSS Campuran-Mod-Mod Contoh CSS Campuran-Mod-Mod Contoh Aug 08, 2025 pm 12:59 PM

Atribut Mix-Blend-Mode digunakan untuk mengawal kesan pencampuran kandungan elemen dan latar belakang. 1. Multiply boleh mencapai tumpang tindih teks dan imej latar belakang; 2. Skrin mencerahkan imej dan sesuai untuk latar belakang gelap; 3. Overlay meningkatkan kontras, menggabungkan ciri -ciri multiply dan skrin; 4. Perbezaan mewujudkan kontras yang kuat, yang sesuai untuk reka bentuk kreatif; Adalah perlu untuk memastikan bahawa unsur-unsur bertindih dan susunan susunan Z-indeks yang betul, dan digabungkan dengan pengasingan: mengasingkan, pelbagai pencampuran boleh terhad, dan kesan visual yang kaya dapat dicapai dengan menyesuaikan warna dan mod.

Cara mengelakkan rehat garis di CSS Cara mengelakkan rehat garis di CSS Aug 08, 2025 pm 05:14 PM

UseWhite-space: nowraptopreventtextFreakingontomultiplines, memastikanContentStononasingleline;

Cara membuat laman web HTML5 yang mudah Cara membuat laman web HTML5 yang mudah Aug 12, 2025 am 11:51 AM

Untuk membuat laman web HTML5 yang mudah, anda perlu terlebih dahulu menggunakan jenis dokumen pengisytiharan, dan kemudian membina struktur asas yang mengandungi, dan, yang menetapkan pengekodan aksara, viewport dan tajuk, menambah kandungan yang kelihatan seperti tajuk, perenggan, pautan, gambar dan senarai. Simpan sebagai fail .html dan buka secara langsung dalam penyemak imbas untuk dilihat, tanpa sokongan pelayan. Ini adalah asas halaman HTML5 yang lengkap dan berkesan.

See all articles