英文:
Why does my div overlap other divs on the bottom?
问题
以下是翻译好的部分：
"The
以下是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: 'Ma Shan Zheng', 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 -->
<!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>
<!-- 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: 'Ma Shan Zheng', 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 -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2020年1月4日 00:38:45
- 转载请务必保留本文链接：https://go.coder-hub.com/59582147.html
- css
- html
评论