我的div为什么在底部与其他div重叠?

huangapple go评论79阅读模式
英文:

Why does my div overlap other divs on the bottom?

问题

以下是翻译好的部分:

"The

class circle displays in the area that belongs to

absolute. I thought it should appear below it, not overlapping it. When I put it on top, it displays ok (well, on top). Why doesn't it display right on the bottom?"

以下是HTML和CSS代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>
<style>
  @import url("https://fonts.googleapis.com/css?family=Ma+Shan+Zheng&display=swap");
</style>
<body>
  <div class="circle">circle</div>
  <div class="gen">
    <div class="relative">Words relative</div>
    <div class="abslute">Other absolute</div>
  </div>
  <div class="circle">circle</div>
</body>
</html>

请注意,我已经去除了不需要的内容,只保留了翻译好的部分和HTML/CSS代码。

英文:

The <div> class circle displays in the area that belongs to <div> abslute. I thought it should appear below it, not overlapping it. When I put it on top, it displays ok (well, on top). Why doesn't it display right on the bottom?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.gen {
  font-size: 60px;
  width: 70vw;
  height: 70vh;
}

.relative {
  background-color: darksalmon;
  height: 50vh;
  width: 50vw;
  font-family: &#39;Ma Shan Zheng&#39;, cursive;
  font-size: 13vw;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 3px solid black;
  margin: 3px;
}

.abslute {
  background-color: rgb(32, 185, 231);
  height: 70%;
  width: 70%;
  font-size: 13vw;
  border: 3px solid black;
}

h1 {
  border: 3px solid black;
  background-color: burlywood;
  width: 35%;
  height: 35%;
  font-size: 10vw;
}

.circle {
  border: 3px solid black;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgba(241, 13, 13, 0.767);
}

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;style&gt;
  @import url(&quot;https://fonts.googleapis.com/css?family=Ma+Shan+Zheng&amp;display=swap&quot;);
&lt;/style&gt;

&lt;body&gt;
  &lt;div class=&quot;circle&quot;&gt;circle&lt;/div&gt;
  &lt;div class=&quot;gen&quot;&gt;
    &lt;div class=&quot;relative&quot;&gt;Words relative&lt;/div&gt;
    &lt;div class=&quot;abslute&quot;&gt;Other absolute&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;circle&quot;&gt;circle&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

Your .gen class is restricting the view height so your circle overlaps. I've extended the view width in the code snippet below so you can see the difference.

Removing the .gen class entirely also works.

.gen {
  font-size: 60px;
  width: 100vw;
  height: 200vh;
}
<div class="gen">
  <div class="relative">Words relative</div>
  <div class="abslute">Other absolute</div>
</div>
英文:

Your .gen class is restricting the view height so your circle overlaps. I've extended the view width in the code snippet below so you can see the difference.

Removing the .gen class entirely also works.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.gen {
  font-size: 60px;
  width: 100vw;
  height: 200vh;
}

.relative {
  background-color: darksalmon;
  height: 50vh;
  width: 50vw;
  font-family: &#39;Ma Shan Zheng&#39;, cursive;
  font-size: 13vw;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 3px solid black;
  margin: 3px;
}

.abslute {
  background-color: rgb(32, 185, 231);
  height: 70%;
  width: 70%;
  font-size: 13vw;
  border: 3px solid black;
}

h1 {
  border: 3px solid black;
  background-color: burlywood;
  width: 35%;
  height: 35%;
  font-size: 10vw;
}

.circle {
  border: 3px solid black;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgba(241, 13, 13, 0.767);
}

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;style&gt;
  @import url(&quot;https://fonts.googleapis.com/css?family=Ma+Shan+Zheng&amp;display=swap&quot;);
&lt;/style&gt;

&lt;body&gt;
  &lt;div class=&quot;circle&quot;&gt;circle&lt;/div&gt;
  &lt;div class=&quot;gen&quot;&gt;
    &lt;div class=&quot;relative&quot;&gt;Words relative&lt;/div&gt;
    &lt;div class=&quot;abslute&quot;&gt;Other absolute&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;circle&quot;&gt;circle&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月4日 00:38:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582147.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定