堆棧內存溢出
  簡體   English   中英

如何將彈出窗口放在疊加層上

[英]How to place Popup over overlay

 原文  2021-03-17 13:06:57  5   1    html/ css/ vue.js

問題描述

我嘗試創建一個位於覆蓋 div 上的模態組件，如下圖所示。 在此處輸入圖像描述

這是我的 html 代碼：

<html lang="fr">
  <head>
    <link rel="stylesheet" type="text/css" href="./index.css">
  </head>
  <body>
    <div id="main">
      <div id="overlay"></div>
      <popup></popup>      
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-resource.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

和 css 代碼：

#overlay {
  position: fixed; 
  display: block; 
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}

#popup {
  position: fixed;
  left: 33%;
  right: 33%;
  width: 30%;
  height: auto;
  padding: 1%;
}

問題是彈出窗口出現在覆蓋層后面而不是覆蓋層之上。 像這樣： 在此處輸入圖像描述 而且我不明白為什么或如何解決它。

1 個解決方案

解決方案1
 1  2021-03-17 13:17:25

添加z-index以指定堆棧順序。

#overlay {
  position: fixed; 
  display: block; 
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}

#popup {
  position: fixed;
  left: 33%;
  right: 33%;
  width: 30%;
  height: auto;
  padding: 1%;
  z-index: 3;
}

如何放置<div id="text_translate"><p>我在頁面中有一些相互下方的圖像，並希望在圖像上垂直而不是水平添加跨度覆蓋文本。我當前的代碼水平顯示（在 iPhone 屏幕上）跨度覆蓋文本，但我想垂直顯示它並從中讀取自下而上。希望你們幫助我。 謝謝</p><p><a href="https://i.stack.imgur.com/g7mt5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7mt5.png" alt="在此處輸入圖像描述"></a></p><pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;/style&gt; &lt;script&gt; //here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="demo"&gt; &lt;strong&gt;1)Item 1&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;70&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;/div&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;SOLD OUT&lt;/span&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt; &lt;a href="https://www.mywebsite.com/item1.html"&gt;https://www.mywebsite.com/item1.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt; &lt;strong&gt;2)Item 2&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;65&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;&lt;/span&gt;&lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.mywebsite.com/item2.html"&gt;https://www.mywebsite.com/item2.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt;</pre><p></p><pre> &lt;/body&gt; &lt;/html&gt;</pre></div>

[英]How to place <span overlay text vertically over an image?

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用JQuery在圖像上放置疊加層？ 如何在Flash對象上放置不透明度&lt;1的疊加DIV 如何放置<div id="text_translate"><p>我在頁面中有一些相互下方的圖像，並希望在圖像上垂直而不是水平添加跨度覆蓋文本。我當前的代碼水平顯示（在 iPhone 屏幕上）跨度覆蓋文本，但我想垂直顯示它並從中讀取自下而上。希望你們幫助我。 謝謝</p><p><a href="https://i.stack.imgur.com/g7mt5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7mt5.png" alt="在此處輸入圖像描述"></a></p><pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;/style&gt; &lt;script&gt; //here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="demo"&gt; &lt;strong&gt;1)Item 1&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;70&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;/div&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;SOLD OUT&lt;/span&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt; &lt;a href="https://www.mywebsite.com/item1.html"&gt;https://www.mywebsite.com/item1.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt; &lt;strong&gt;2)Item 2&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;65&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;&lt;/span&gt;&lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.mywebsite.com/item2.html"&gt;https://www.mywebsite.com/item2.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt;</pre><p></p><pre> &lt;/body&gt; &lt;/html&gt;</pre></div> 如何在 div 上疊加圖像 如何使固定覆蓋容器中的彈出窗口可滾動？ 如何使comodo彈出窗口覆蓋其他元素？ 如何使彈出窗口覆蓋文章 如何在圖像幻燈片上放置黑色疊加層 如何將圖像放置在圖像上方？ 如何在圖像上放置文本？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM