时间戳

首页 > 解决方案 > 位置：与宽视口绝对重叠

html - 位置：与宽视口绝对重叠

问题描述

我有一个稍微旋转的 div，在我的起始页上创建了一个不对称的图形。我overflow: hidden用来隐藏该div的重叠。一切都使用绝对定位来准确地将元素放在我想要的位置，并使用 vw 和 vh 使其响应。纵横比“正常”时看起来很棒，但当窗口接近 2 或 3:1 纵横比时（如超宽显示器），一切都会重叠。窄纵横比不是问题，因为我在它成为问题之前将其切换到移动视图。

我考虑过使用overflow: auto它，这样它就不会被迫适应视口，但可以看到旋转的 div 的边缘。

是否有解决方案，或者这可能是不好的做法，应该以不同的方式进行？

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

#body {
	overflow: hidden;
	background: red; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}


.shape {
	position: absolute;
	right: -10%;
	top: -50%;
	height: 200%;
	width: 45%;
	transform: rotate(350deg);
	background: white;
}

#welcome {
	position: absolute;
	color: black;
	z-index: 999;
	margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
	margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
	font-size: 4vw;
	margin-top: 0;
}

#startbtn {
	position: absolute;
	font-size: 3vw;
	padding: 4vh 5.5vw 4vh 5.5vw;
	background: blue;
	color: white;
	border: none;
	margin-left: 65vw;
	margin-top: 70vh;
}
<body id="body">
	<div class="shape"></div>

    <div class="wrapper">
      <div id="welcome" autofocus>
        <h1>Welcome</h1>
        <p>More Text Here</p>
      </div>
    </div>

    <div class="wrapper">
      <input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
    </div>
</body>
</html>

谢谢！

标签： htmlcssresponsive-design

解决方案

欢迎来到 Stackoverflow。将形状放入同一个容器（我使用第一个包装器）作为您的内容应该可以解决问题。为什么会这样：因为白色形状应该与您的内容相关。我也确实将按钮放在同一个容器中。

而且你的身体不需要背景尺寸，因为它只是纯红色。

我可能弄乱了您的原始尺寸，但这应该可以解决问题。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  overflow: hidden;
  background: red;
}

.wrapper {
  position: relative;
  height: 100%;
}

.shape {
  position: absolute;
  margin-top: -50%;
  margin-right: -50%;
  right: 0;
  height: 300%;
  width: 100%;
  transform: rotate(350deg);
  background: white;
}

#welcome {
  position: absolute;
  color: black;
  z-index: 999;
  margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
  margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
  font-size: 4vw;
  margin-top: 0;
}

#startbtn {
  position: absolute;
  font-size: 3vw;
  padding: 4vh 5.5vw 4vh 5.5vw;
  background: blue;
  color: white;
  border: none;
  margin-left: 65vw;
  margin-top: 70vh;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#body {
  overflow: hidden;
  background: red;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wrapper {
  position: relative;
  height: 100%;
}

.shape {
  position: absolute;
  margin-top: -50%;
  margin-right: -50%;
  right: 0;
  height: 300%;
  width: 100%;
  transform: rotate(350deg);
  background: white;
}

#welcome {
  position: absolute;
  color: black;
  z-index: 999;
  margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
  margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
  font-size: 4vw;
  margin-top: 0;
}

#startbtn {
  position: absolute;
  font-size: 3vw;
  padding: 4vh 5.5vw 4vh 5.5vw;
  background: blue;
  color: white;
  border: none;
  margin-left: 65vw;
  margin-top: 70vh;
}
<div class="wrapper">
  <div class="shape"></div>
  <div id="welcome" autofocus>
    <h1>Welcome</h1>
    <p>More Text Here</p>
  </div>
  <input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>

推荐阅读