隱藏在div上方的內容
[英]Content hiding above div's
問題描述
我精通HTML / CSS，但遇到的問題比彎腰還嚴重。 為了測試我的技能，我在電視節目等上建立了網站，而在設計網站時，我遇到了一個問題。 從屏幕快照中可以看到，盡管我在上一個之后聲明了div，但它似乎正在隱藏。
如你看到的。 我已經嘗試了段落標記和div，似乎沒有任何作用，我已經包含了HTML和CSS。
body { padding:0; margin: 0; font-family: 'Raleway'; } .nav { background-color: black; text-decoration: none; color: silver; margin: 0; list-style: none; text-align: center; } .nav > li { display: block; } /* .nav > li:before { content: "*"; } */ .nav > li > a { text-decoration: none; color: silver; font-size:24px; text-transform: uppercase; font-weight: bolder; letter-spacing: 4px; } .nav-btn { display:block; font-size: 30px; background-color: black; color: silver; text-align: center; cursor: pointer; } .image { background-image:url('download1.jpg'); width:100%; max-height:400px; background-position: left center absolute; background-size: 100%; background-repeat: no-repeat; position: absolute; } .title { display: inline-block; color: white; position:relative; margin: 15%; text-transform: uppercase; } .image { text-align: center; position:absolute; } .image > h2 { padding-top: 50%; line-height: 50%; } @media screen and (max-width: 411px) { .title > h2 { font-size: 15px; } .image { max-height:280px; } } .submitbox { color: yellow; background-color: darkblue; z-index: 1 !important; }
<!DOCTYPE html> <head> <title>Welcome to France!</title> <link rel="stylesheet" href="Reign.css" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> </head> <body> <!-- <div id="header">"Today I am King!"</div> --> <nav> <span class="nav-btn">Menu</span> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div> <div id="submitbox"><h2>Sign up for our Newsletter!</h2></div> <p>hello</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $('span.nav-btn').click(function () { $('ul.nav').toggle(); }); </script> </body>
某些代碼與我的要求無關。 另外，我有一個菜單，但是在頁面加載時它是打開的，想知道如何才能在頁面加載時將其關閉嗎？ 另外，運行該代碼段並不能說明我在說什么，因為圖像丟失了。
編輯：重要的是用來嘗試將H2帶到圖像的前面，這在運行代碼段時看不到。 我使用了位置計算，因此在進行任何調整時都不會影響上述樣式，對不起，如果我做錯了。 還更改了圖像。
1 個解決方案
解決方案1
1 已采納 2016-03-29 20:31:12
對於菜單問題，只需設置display:none; 到您的.nav ，它將開始不可見。 對於您的其他問題，我認為將您的立場設置為絕對是導致問題的原因。 通過將其更改為position:relative （並使背景變為綠色，以便您可以看到它），div就會顯示出來，並且不會阻止新聞稿文本。 絕對div不在乎它周圍還有什么。 如果將其設置為絕對，它將相對於其最接近的祖先位置。在您的HTML中，它是<body>
另外，您標記id="submitbox"但在CSS中使用.submitbox而不是#submitbox引用它
body { padding:0; margin: 0; font-family: 'Raleway'; } .nav { display:none; background-color: black; text-decoration: none; color: silver; margin: 0; list-style: none; text-align: center; } .nav > li { display: block; } /* .nav > li:before { content: "*"; } */ .nav > li > a { text-decoration: none; color: silver; font-size:24px; text-transform: uppercase; font-weight: bolder; letter-spacing: 4px; } .nav-btn { display:block; font-size: 30px; background-color: black; color: silver; text-align: center; cursor: pointer; } .image { background-image:url('download1.jpg'); width:100%; max-height:400px; background-position: left center absolute; background-size: 100%; background-repeat: no-repeat; position: absolute; } .title { display: inline-block; color: white; position:relative; margin: 15%; text-transform: uppercase; } .image { text-align: center; position:relative; background-color:green; } .image > h2 { padding-top: 50%; line-height: 50%; } @media screen and (max-width: 411px) { .title > h2 { font-size: 15px; } .image { max-height:280px; } } .submitbox { color: yellow; background-color: darkblue; z-index: 1 !important; }
<!DOCTYPE html> <head> <title>Welcome to France!</title> <link rel="stylesheet" href="Reign.css" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> </head> <body> <!-- <div id="header">"Today I am King!"</div> --> <nav> <span class="nav-btn">Menu</span> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div> <div id="submitbox"><h2>Sign up for our Newsletter!</h2></div> <p>hello</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $('span.nav-btn').click(function () { $('ul.nav').toggle(); }); </script> </body>
隱藏並顯示div的
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.