重疊 - 優文庫

this picture shows the overlapping of two div, in one div I took a table with two button floating right and in another div I worked on an image 重疊

here the overlapping don't occur

當我描述上述我的重疊問題如何處理在CSS固定位置屬性。我希望他們總是看起來一樣。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <style> 

     .buttonProperty{ 
      background-color: #4CAF50; /* Green */ 
      border: none; 
      color: white; 
      padding: 15px 32px; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      font-size: 16px; 
      margin: 4px 2px; 
      cursor: pointer; 
      -webkit-transition-duration: 0.4s; /* Safari */ 
      transition-duration: 0.4s; 
      float:right; 
      margin-right:20px; 



     } 
     .buttonProperty:hover { 
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
     } 


     .auto-style2 { 
      height: 323px; 
      background-image:url('images/img.jpg'); 
      background-size: 100% 100%; 
      /*filter: grayscale(80%);*/ 
      filter: opacity(30%); 
     } 
     .tableProperty{ 
      position:fixed; 
     } 

     .auto-style3 { 
      height: 154px; 
     } 

    </style> 
</head> 
<body style="height: 526px"> 

    <form id="form1" runat="server"> 


     <div class="auto-style3"> 
      <table style="width: 100%;" class="tableProperty"> 
       <tr> 
        <td> 
         <asp:Button ID="Button1" CssClass="buttonProperty" runat="server" Text="Button" /></td> 
       </tr> 
       <tr> 
        <td> 
         <asp:Button ID="Button2" CssClass="buttonProperty" align="right" runat="server" Text="Button" /></td> 
       </tr> 
      </table> 
     </div> 


    </form> 
    <div class="auto-style2" > 
    </div> 
    <p>sfsd</p><br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
    <p>sfsd</p> 
    <br /> 
</body> 
</html>

來源

2017-04-14 Chakma

這個問題有很多答案，但只有幾個正確的答案通過實際看到你的代碼。你能提供你的代碼嗎？

也許你應該將位置改爲相對而不是固定的。邊距和填充也可能會影響到這一點。

如果我看到您的代碼，我會有一個確定的答案。

來源

2017-04-14 06:30:47 MonkeyWithMachine

已編輯。可能是我應該使用所有這些內部的HTML表格。 – Chakma

position: fixed是這裏的罪魁禍首。它有點像絕對定位，因爲它將元素從正常流程中取出（通常看起來像是在其他元素上渲染的元素）。

您可以在Mozilla開發者網絡上定位讀了起來：https://developer.mozilla.org/en-US/docs/Web/CSS/position（MDN是HTML，CSS和JS基礎知識文檔的重要來源。）

什麼fixed所做的重要組成部分：

將元素從正常文檔流中移除;爲頁面佈局中的元素創建的空間不是。相反，它相對於屏幕的視口定位爲，並且在滾動時不移動。

您可以通過使用不同的定位類型的.tableProperty解決此佈局。（根據提供的代碼，您可能根本不需要任何定位;這相當於默認值position: static。）

來源

2017-11-29 09:44:52 joanwolk

重疊

回答

相關問題