想知道您是否可以提供帮助。在谷歌上用这个在房子里走来走去。
基本上，我试图在 SASS 中构建一个网站，而不是有意使用任何 css 框架。但是我在制作我的两篇文章时遇到了问题，出现在我的标题/标题图片下...这是该网站当前的样子:
问题是，我在页眉上有一些 javascript，如果您在图像上移动鼠标，图像会向鼠标移动的方向平移。这似乎只适用于标题设置为:position: absolute;
因此，我的文章位于页眉之上/之内。
如果我删除 position: absolute，只有这样，我的文章才会位于标题下方。但是 javascript 不起作用...
这是我目前使用的相关 CSS/SASS:
header {
// background-image: url(https://kordastudio.hu/wp-
content/uploads/2017/01/blade-runner-2049_.jpg);
background-image: url(/assets/images/futuristic_background.jpg);
background-position: center;
background-size: 100%;
position: absolute;
background-repeat: no-repeat;
top: 0;
left: 0;
z-index: -1;
/* Preserve aspet ratio */
min-width: 110%;
min-height: 500px;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
// position:relative;
// padding:10px;
margin: 0 auto;
width: 100%;
min-height: 100vh; /* make sure wrapper is taller enough */
border: solid thin #060;
// overflow: hidden; /* Add this */
}
.flex-item:nth-child(1) {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.flex-item:nth-child(2) {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.flex-item:nth-child(3) {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
HTML:
<body>
<main>
<nav>
<ul>
<li>about me</li>
<li>projects</li>
<li>timeline</li>
<li>linkedin</li>
<li>github</li>
</ul>
</nav>
<!-- Background image and title -->
<div class="container">
<header id="header" class="gradient flex-item">
<h1>hello</h1>
</header>
<!-- grey container -->
<article class="flex-item">
text
</article>
<article class="flex-item">
text
</article>
</div>
<main>
真烦人!与这个斗争!提前致谢!
最佳答案
我真的让它工作了。基本上，我的容器和 flex 元素的代码有问题。我找到了另一个 flex 解决方案，它避免了对绝对位置的需要，并将我的盒子放在下面。
不确定它到底是什么，但这是下面的新代码。我将它包裹在我想出现在标题下方的文章中......
.flex-grid {
display: flex;
margin-top: -50;
}
.flex-grid .col {
flex: 1;
background-color: #1d1d1d;
margin-top: 0px;
width: 100%;
height: 300px;
border: 1px solid orange;
padding: 20px;
}
关于CSS:Divs/文章不在标题下方 - 定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50021903/