Question

http://i.stack.imgur.com/pKdrK.png

从这张图片中我可以看到，我试图创建一个标题，顶部有一个div，它是页面的主标题。我到处寻找，我无法弄清楚如何在标题的顶部获得标题，这可能非常简单，但我不确定。

P.S。标题是几乎看不到的小红点。

CSS

#title {
   font-family:Bebas;
   font-size:20px;
   font-weight:bold;
   border:5px groove #ff0022;
   color:#00D0FF;
   background-color:#ff0022;
   position:relative;
   margin-left:10px;
   margin-top:10px;
}
#banner {
       border:1px solid #4A4A4A;
       width:1903;
       height:110;
       background-color:#4A4A4A;
       margin-left:0px;
       position:absolute;
       top:-10px;
       border-radius:15px;
}
a:visited {

          text-decoration:none;
}

HTML

<head>
<link type="text/css" rel="stylesheet" href="todd.css"/>
<title>Todd's Website</title>

</head>

<body>
     <a href="file:///C:/Users/Todd/Desktop/todd.html">
        <h1>
            <div id="title">Todd's Awesome Website!
                <div id="banner">




                </div>
            </div>
        </h1>
     </a> 
</body>



</html>

JSFiddle

Answer 1

你应该将你的div放在h1标签之外，并在h1标签上标题为id。另外，您应该在h1标签内添加标签：

<div>
  <div id="banner">
    <h1 id="title">
      <a href="file:///C:/Users/Todd/Desktop/todd.html">
        Todd's Awesome Website!
      </a>
    </h1>
  </div>
</div>

希望这能达到你想要的结果。

Answer 2

为什么不简单地将标题放在横幅内？您可以将所有样式直接应用于H1

Answer 3

如果您不想在横幅内移动标题，可以使用z-index: 10;。这应该让它显示出来。

简单的CSS / HTML - 嵌套元素

3 个答案: