为啥我不能向上移动这个图像？ CSS问题
Posted
技术标签:
【中文标题】为啥我不能向上移动这个图像？ CSS问题【英文标题】：why can't I move this image upward? Css question为什么我不能向上移动这个图像？ CSS问题 【发布时间】：2022-01-12 23:55:13 【问题描述】：我试图弄清楚如何使用纯 css 使存根图像更靠近导航栏。我尝试使用 translateY() 值将图像推得更高，并使用了 'bottom' 和 'top' 值 with 一个绝对值（所以它应该可以工作）。我不相信图像或导航栏上有任何边距，所以如果您知道如何解决这个问题，我们将不胜感激！
这是我的 css 和 html！
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
html, body
height: 100%;
.stubimg
position: relative;
top: 36%;
text-align: center;
align-items: center;
align-self: center;
align-content: center;
body
margin: 0;
background-color: #051721;
nav
position: absolute;
top: 13%;
right: 0;
left: 0;
width: 319px;
display: table;
margin: 0 auto;
transform: translateY(-50%);
font-family: 'Bungee Inline', cursive;
nav a
position: relative;
width: 33.333%;
display: table-cell;
text-align: center;
color: #1A4645;
text-decoration: none;
font-family: 'Bungee Inline', Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
transition: 0.2s ease color;
nav a:before, nav a:after
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
nav a:before
top: 0;
left: 10px;
width: 6px;
height: 6px;
nav a:after
top: 5px;
left: 18px;
width: 4px;
height: 4px
nav a:nth-child(1):before
background-color: #F8BD25;
nav a:nth-child(1):after
background-color: #cc7000;
nav a:nth-child(2):before
background-color: #F8BD25;
nav a:nth-child(2):after
background-color: #cc7000;
nav a:nth-child(3):before
background-color: #F8BD25;
nav a:nth-child(3):after
background-color: #cc7000;
#indicator
position: absolute;
left: 12%;
bottom: 0;
width: 30px;
height: 3px;
background-color: transparent;
border-radius: 5px;
transition: 0.2s ease left;
nav a:hover
color: #286868;
nav a:hover:before, nav a:hover:after
transform: scale(1);
nav a:nth-child(1):hover ~ #indicator
background: linear-gradient(130deg, #F8BD25, #cc7000);
nav a:nth-child(2):hover ~ #indicator
left: 45%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
nav a:nth-child(3):hover ~ #indicator
left: 78.5%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We are Stub.">
<meta name="author" content="Stub">
<meta property="og:title" content="Stub">
<meta property="og:type" content="website">
<meta property="og:url" content="https://stub.w3spaces.com/">
<meta property="og:description" content="We are Stub">
<meta property="og:image" content="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="apple-touch-icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<!-- css-->
<link rel="stylesheet" href="https://stub.w3spaces.com/main.css?bypass-cache=1625014765">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap" rel="stylesheet">
<title>Stub</title>
<body>
<div class="stubimg">
<img src="https://stub.w3spaces.com/Stub_Tree.png" >
</div>
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">MUSIC</a>
<div id="indicator"></div>
</nav>
</body>
</html>请记住，图片的 css 仅位于 css 代码的顶部，所以不要花时间寻找它！感谢您的帮助！
【问题讨论】：
使用top 而不是bottom 代表.stubimg。 编辑：这个bottom 设置似乎来自外部样式表，具有更高的特异性。只需增加您自己的特异性即可覆盖它。
这并不能解决您的特定问题，但是为什么在标记中导航之前有图像？另外，你为什么要为导航使用绝对定位？
我相信你可以减少stubimg类的top属性的值。
我使用绝对值来确保顶部底部值有效
我已经尝试降低它，甚至删除了最高值，它仍然无法正常工作
【参考方案1】：
您正在使用align-content:center;property，这就是为什么图像固定在页面中心并且顶部也不起作用的原因。只有这样才能将图像水平居中固定。
.stubimg
position: relative;
text-align: center;
现在您可以根据需要固定图像的位置。
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
html, body
height: 100%;
.stubimg
position: relative;
text-align: center;
body
margin: 0;
background-color: #051721;
nav
position: absolute;
top: 13%;
right: 0;
left: 0;
width: 319px;
display: table;
margin: 0 auto;
transform: translateY(-50%);
font-family: 'Bungee Inline', cursive;
nav a
position: relative;
width: 33.333%;
display: table-cell;
text-align: center;
color: #1A4645;
text-decoration: none;
font-family: 'Bungee Inline', Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
transition: 0.2s ease color;
nav a:before, nav a:after
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
nav a:before
top: 0;
left: 10px;
width: 6px;
height: 6px;
nav a:after
top: 5px;
left: 18px;
width: 4px;
height: 4px
nav a:nth-child(1):before
background-color: #F8BD25;
nav a:nth-child(1):after
background-color: #cc7000;
nav a:nth-child(2):before
background-color: #F8BD25;
nav a:nth-child(2):after
background-color: #cc7000;
nav a:nth-child(3):before
background-color: #F8BD25;
nav a:nth-child(3):after
background-color: #cc7000;
#indicator
position: absolute;
left: 12%;
bottom: 0;
width: 30px;
height: 3px;
background-color: transparent;
border-radius: 5px;
transition: 0.2s ease left;
nav a:hover
color: #286868;
nav a:hover:before, nav a:hover:after
transform: scale(1);
nav a:nth-child(1):hover ~ #indicator
background: linear-gradient(130deg, #F8BD25, #cc7000);
nav a:nth-child(2):hover ~ #indicator
left: 45%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
nav a:nth-child(3):hover ~ #indicator
left: 78.5%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We are Stub.">
<meta name="author" content="Stub">
<meta property="og:title" content="Stub">
<meta property="og:type" content="website">
<meta property="og:url" content="https://stub.w3spaces.com/">
<meta property="og:description" content="We are Stub">
<meta property="og:image" content="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="apple-touch-icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<!-- css-->
<link rel="stylesheet" href="https://stub.w3spaces.com/main.css?bypass-cache=1625014765">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap" rel="stylesheet">
<title>Stub</title>
<body>
<div class="stubimg">
<img src="https://stub.w3spaces.com/Stub_Tree.png" >
</div>
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">MUSIC</a>
<div id="indicator"></div>
</nav>
</body>
</html>【讨论】：
【参考方案2】：我意识到 stubimg 类不是绝对的，而是相对的。我的错！
【讨论】：
以上是关于为啥我不能向上移动这个图像？ CSS问题的主要内容，如果未能解决你的问题，请参考以下文章