隐藏在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.