gpt4 book ai didi

HTML 和 CSS 矩形不能正确显示

转载 作者:行者123 更新时间:2023-11-28 05:50:35 24 4
gpt4 key购买 nike

您好,我有一个网站,其中有一些文字告诉用户有关该网站的信息。我想在文本后面绘制一个白色矩形,以将其与背景分开。

我可以绘制矩形,但矩形会覆盖文本。

我正在使用下面的 CSS 代码绘制矩形:

#rect1 {
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
}

这是主页中的 HTML:

<body>
<div class="container_24">
<header>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="software.html">Projects</a ></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>

<div class="banner grid_18" href="about.html">
<a href="logic.html" class="button" id="new">View Article</a>
<h2>

</h2>
</div>
<div class=" grid_8 callout"></div>
<a href="gallery.html" class="button" id="spacesoft">View Gallery</a>
</header>
<div id="rect1"></div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in
the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
<p><a href="about.html" class="button">Find Out More</a></p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We
ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p>
<p>
</p>
<p> </p>
<p><a href="about.html" class="button">Find Out More</a></p>
</div>
<div class="grid_6">
</div>

<div id "rect1></div>

是在 html 代码中表示绘制矩形的部分。我怎样才能让它在文本后面绘制矩形?

最佳答案

可以添加

z-index: -1;

#rect1:

#rect1{
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
z-index: -1;
}

Fiddle

(您可能还应该调整矩形大小以使其看起来更好。)

关于HTML 和 CSS 矩形不能正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37361427/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com