如何在不同的分辨率下保持覆盖在屏幕上的相同位置

Question

我还没有找到一个适合我的答案-我希望有人能帮助我。我的CSS技能不足…

我有一个视频显示在一个网页，将有一个文本覆盖。我的问题是，在我的屏幕上，覆盖是在正确的位置。当它被投影到大屏幕上时，覆盖层的位置是错误的。

解决这个问题的最佳策略是什么?CSS中的定位叠加?使用面板?代码遵循…

CSS:

.video {
        position:absolute;
        bottom:0px;
        left:0px;
        width:50%;
        height:80%;   
    }
    #vidPlayer {
            position:absolute;
            bottom:-100px;
            left:0px;        
            width:100%; 
            display:block;
            z-index:99;
        }
    .overlayLabel {
        font-size:xx-large;
        font-weight:bolder;
        font-style:italic;
        color:antiquewhite;
        position:absolute;
        text-align:center;
        bottom:50px;
        left:100px;
        width:900px;  
        border:2px solid red;      
        z-index:2147483647;
    }

HTML:

<div>
    <article class="video">      
        <video id="vidPlayer" title="My Video" >
            <source src="Media/MyVideo.mp4"  type="video/mp4" />
        </video>
        <asp:Label ID="lblWinner" runat="server" Text="Test Overlay" CssClass="overlayLabel"></asp:Label>      
    </article>
</div>

---

我的修改修复了以下问题:

• 在视频上显示文本覆盖的CSS(动态文本设置)
• 视频现在是合适的大小

• 无论屏幕大小，叠加位置都是正确的

  .video {
      position:relative;
      width:100%;
      height:auto;   
  }
  #vidPlayer {
      z-index:99;
      position:relative;     
      width:100%; 
      height:100%;
      }
  .overlayLabel { 
      z-index:2147483647;
      position:absolute;    
      background-image:url("Images/test.png");
      -webkit-transform: rotate(13deg);
      -moz-transform: rotate(13deg);
      -ms-transform: rotate(13deg);
      -o-transform: rotate(13deg);
      transform: rotate(13deg);
      font-size:xx-large;
      font-weight:bolder;
      text-align:center; 
      color:black;       
      bottom:44%;
      left:37%;
      width:30%; 
      height:24%;      
  }
  

Answer 1

你需要让你的设计响应。

你可以使用CSS媒体查询，所以有不同的样式规则，在不同的分辨率(宽度)，定位你的标签/文本。看到这个。

或者您可以使用响应式单位，如%， vh, vw来代替px来定位。