如何在打開開發人員工具時停止元素移動

-1

因此，這一直困擾着我一段時間。讓我們說你建立一個網站，並有各種Z值的元素。當您根據您使用的瀏覽器打開開發人員工具或螢火蟲時，它似乎將元素而不是頁面整體移動。如何在打開開發人員工具時停止元素移動

這是平面設計材料設計的倒退還是我只是想念一些東西。感覺有些事情是不對的。我在很多網站上看到了同樣的問題，並且自己也碰到過。只是想知道是否有一些CSS或JS欺騙我想錯過的地方。

值得一提的是，這只是一個垂直問題，所以我不認爲媒體查詢會解決這個問題，因爲身高並不是一個因素。我也嘗試將頁面主體固定爲最小高度值，但這也不是這種情況。只有正在移動的z索引值項目。

也許我需要修復受影響的個人元素的最小高度？但是這似乎有點長，如果我需要這個每次

在這個任何信息，將不勝感激首先感謝

來源

2017-06-17 Nick

如果你'你的頁面上fixed'定位的元素，他們自然會因爲打開開發者工具窗口更新自己的位置降低，因爲他們視口高度或寬度和就此而言，他們將根據新的尺寸重新定位自己。 – abhishekkannojia

@abhishekkannojia是對的。 –

但是，如果你仍然想解決這個問題，你可以設置一個CSS媒體查詢，併爲桌面屏幕的視口高度小於650像素和寬度大於991像素的HTML，身體元素提供修復高度。您可以根據需要調整大小。謝謝 –

嗨，大家好爲投球。儘管我感激你的回覆，他們沒做」我真的想以我想要的方式工作。昨晚我身份證挖掘並認爲自己必須有更好的方式來做到這一點。

Perphaps我沒有足夠的解釋，我實際上想要做的是在一個元素的背景圖像上放置一個漸變，然後使用：before選擇器在同一個元素上並使用z-index值。這造成了一個巨大的ballache，因爲在視口上變化的梯度不是足夠的高度或超過拉伸。

回到我原來的想法，我開始思考自己的想法，必須有一種方式來坐這個沖洗少一點麻煩。經過一番挖掘BOOM！我意識到你實際上可以將背景圖像和漸變屬性合併到同一個元素中，解決問題。

這裏是I類設置：

.site-header { 
    min-height: 90vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    background: linear-gradient(to bottom right,#1d9bc8,#37e1d7, transparent), url("../img/herobg.jpg") no-repeat center; 
    background-size: cover; 
}

來源

2017-06-20 09:19:12 Nick

如何在打開開發人員工具時停止元素移動

回答

相關問題