Question

所以我目前正在我的网站上工作......当我尝试将图像添加到页面时，我遇到了问题。所以我开始在主页上添加了这个 -

#titleOne, #paraOne, #paraTwo, #paraThree{
	text-align: center;
}

<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
	<body>	
        <center>
		<h1 id="titleOne">Hello!</h1>
		<p id="paraOne">This is my first website!</p>

		<hr>

		<p id="paraTwo">Hopefully this isn't too boring :/ stay and you might like what you see in the future!</p>
		<p id="paraThree">Fact: I will not stop until I get it done.</p>

    </center>
	</body>
	</html>

这很好用，一切都在中心，看起来很棒！但是现在当我尝试添加图像并将其放在中心标签中时，它会添加到中心。我不希望这样......我希望图像进入屏幕的右上角但是有几个百分点，所以它不会卡在屏幕的一侧。我似乎无法实现这一点，因为这样做我必须做出这样的立场：绝对;当我做的每件事都移动到位。你们会推荐什么？这是图像代码。

#img {
    /*position: absolute;*/
	width: 100px;
	height: 100px;
	border-radius: 100%;
	-webkit-animation: fadein 2s; 
}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

<img id="img" src="imgs/meFive.JPG" alt="My picture" >

谢谢！

Answer 1

您不应将图像放在中心标签中。你应该把它放在中心标签之外

img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    -webkit-animation: fadein 2s; 
    position: absolute;
    top: 0px;
    right: 0px;
}

Answer 2

如下所示，绝对定位元素不会更改已使用的页面上的内容：

#img {
  position: absolute;
  right: 0;
  top: 0;
  margin: 3%;
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

#titleOne, #paraOne, #paraTwo, #paraThree{
	text-align: center;
}
#img {
  position: absolute;
  right: 0;
  top: 0;
  margin: 3%;
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
	<body>	<img id="img" src="imgs/meFive.JPG" alt="My picture" >
        <center>
		<h1 id="titleOne">Hello!</h1>
		<p id="paraOne">This is my first website!</p>

		<hr>

		<p id="paraTwo">Hopefully this isn't too boring :/ stay and you might like what you see in the future!</p>
		<p id="paraThree">Fact: I will not stop until I get it done.</p>

    </center>
	</body>
	</html>

＆＃13;

Answer 3

我真的没有得到你想做的事！但请记住，当您想要使用该元素的position: absolute;父元素时，必须有一个位置。它不重要relative, absolute, ...但必须有一个OR元素离开屏幕或在一些奇怪的地方。（通常基于窗口屏幕位置）

我应该在我的网站上使用什么位置[建议需要]

3 个答案: