隐藏在div上方的内容
[英]Content hiding above div's
问题描述
I have an adept knowledge in HTML/CSS but I'm having a problem that has more than stooped me. 
我精通HTML / CSS，但遇到的问题比弯腰还严重。 In order to test my skills, I build websites on TV Shows etc, and while designing one, I've ran into a problem. 为了测试我的技能，我在电视节目等上建立了网站，而在设计网站时，我遇到了一个问题。 As seen in the screenshot, although I've declared the div after the previous one, it seems to be hiding. 从屏幕快照中可以看到，尽管我在上一个之后声明了div，但它似乎正在隐藏。
As you can see. 如你看到的。 I've tried both paragraph tags and divs, nothing seems to be working, I've included the HTML and CSS. 我已经尝试了段落标记和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>
Some of that code isn't relevant to what I'm asking. 某些代码与我的要求无关。 Also, I have a menu but it's open when the page loads, and idea how I can get this to be closed on page load? 另外，我有一个菜单，但是在页面加载时它是打开的，想知道如何才能在页面加载时将其关闭吗？ Also running the code snippet doesn't illustrate what I'm saying as the image is missing. 另外，运行该代码段并不能说明我在说什么，因为图像丢失了。
EDIT: important was used to try and bring the H2 to the front of the image, which cannot be seen when running the code snippet. 编辑：重要的是用来尝试将H2带到图像的前面，这在运行代码段时看不到。 I used position abolute so when anything is adjusted it will not affect said styles, sorry If I'm doing that wrong. 我使用了位置计算，因此在进行任何调整时都不会影响上述样式，对不起，如果我做错了。 Also changed the images. 还更改了图像。
EDIT2: I just realised why I used position absolute, it was to stop the image getting white bars above and below the image when the window is scaled down White bars? EDIT2：我刚刚意识到为什么我要使用绝对位置，当窗口按比例缩小白条时，是要停止使图像在图像上方和下方出现白条？
1 个解决方案
解决方案1
1 已采纳 2016-03-29 20:31:12
For your menu issue, just set display:none; 对于菜单问题，只需设置display:none; to your .nav and it will start not visible. 到您的.nav ，它将开始不可见。 For your other issue, I believe having your position set to absolute is what is causing the issue. 对于您的其他问题，我认为将您的立场设置为绝对是导致问题的原因。 By changing it to position:relative (and making the background green so you can see it), the div shows up and doesn't block the newsletter text. 通过将其更改为position:relative （并使背景变为绿色，以便您可以看到它），div就会显示出来，并且不会阻止新闻稿文本。 Absolute div's don't care what else is around it. 绝对div不在乎它周围还有什么。 It will be position relative to its nearest ancestor if set to absolute, which in the case of your HTML, is the <body> 如果将其设置为绝对，它将相对于其最接近的祖先位置。在您的HTML中，它是<body>
Also, you label id="submitbox" but reference it in css with .submitbox instead of #submitbox 另外，您标记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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.