我正在开发一个网站，在制作一个在不同屏幕尺寸上绝对定位的 div 时遇到了问题。这是上下文和我到目前为止所尝试的：
问题： 我的 HTML 中有一个标头部分，我在其中绝对定位了“号召性用语”(CTA) div。该 div 包含几个按钮。虽然定位在一种特定的屏幕尺寸上看起来很完美，但当我调整浏览器窗口大小或在不同设备上查看它时，它无法正确调整。
代码示例： 这是我的 HTML 和 CSS 的相关部分：
<header class="min-h-[25vh] max-w-full relative">
<div class="absolute top-[0px] md:top-[-155px] min-h-full">
<video src="../../../videos/video-accueil.mp4" autoplay muted playsinline loop></video>
</div>
<div class="relative">
<div class="flex flex-col md:flex-row md:space-x-7 items-center space-y-4 justify-around z-20 absolute bottom-[-300px] md:space-y-0 md:bottom-[-380px] left-0 right-0 mx-auto w-fit">
<!-- Buttons here -->
</div>
</div>
</header>这是基于您的代码的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CTA Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="background-video">
<video src="https://file-examples.com/storage/fe4996602366316ffa06467/2017/04/file_example_MP4_1920_18MG.mp4" autoplay muted playsinline loop></video>
</div>
<div class="cta-container">
<div class="cta">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
</header>
</body>
</html>
使用下面的 CSS 根据要求和屏幕调整样式
/* Style the header */
.header {
min-height: 50vh; /* Adjust height as needed */
position: relative; /* Required for absolute positioning */
}
/* Style the video background */
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Ensure video fills the header */
overflow: hidden; /* Prevent video overflow */
}
.background-video video {
width: 100%;
height: 100%; /* Stretch video to fit container */
object-fit: cover; /* Preserve aspect ratio (optional) */
}
/* Style the CTA container (optional for centering) */
.cta-container {
display: flex; /* Make parent container a flexbox (optional) */
justify-content: center; /* Horizontally center CTA div (optional) */
position: absolute;
top: 67%; /* 80% from the top of the header (Adjust this as per needed Important) */
bottom: 10%; /* 10% from the bottom of the header (Adjust this as per needed Important) * */
left: 0;
right: 0;
z-index: 2; /* Ensure CTA div is above background video */
}
/* Style the CTA div */
.cta {
width: fit-content; /** adust if needed */
height: fit-content; /** adust if needed */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
padding: 1rem;
border-radius: 5px;
color: #fff;
}
/* Style CTA buttons (adjust as needed) */
.cta button {
padding: 0.5rem 1rem;
border: none;
color: inherit;
background-color: #333; /* Adjust button color */
cursor: pointer;
}
/* Media queries for further adjustments (optional) */
@media (max-width: 768px) {
.cta {
/* Adjust styles for smaller screens (if needed) */
}
}