Question

您好我的英语不好。我正在制作一个带有html和css的网站并遇到了问题。我会首先向您展示代码然后再显示问题。

HTML：

  <!DOCTYPE html>

  <html lange="en">
  <meta charset="utf-8" />

   <link REL=StyleSheet HREF="css/style.css" TYPE="text/css" MEDIA=screen>

  <title>Space and Tech</title> 

  <body>

 <div id = "header"></div>

 <div id = "logo">
 <img src="img/ghost.png" id = "ghost">
 <img src="img/apparition.png" id = "apperition">
 </div>

  <!---<a  href="about.html" id = "Link1"> our HTML tutorial</a>-->
 </body>
</html>

CSS：

  body{

background: #CCAC7E;
    margin:0;
    padding: 0;
    font-family: "Helvetica","Arial"; 

  }

 #header{
  width: auto;
  height: auto;
  background: #F97139;
  overflow: auto;
  margin: 0 auto;
  padding: 50px;
 }

  #logo{

   width: 75px;
   height: 75px;
   margin-top: -88px;
   margin-left: 50px;
 }

#apperition{

 margin-top: -128px;
 margin-left: 90px;
  }

问题是当我改变#header的边距时它会移动，＃apparition和#logo也会移动。我不确定为什么会这样，但任何人都可以帮助我！

Answer 1

每个的解释：

static =＆gt;元素按顺序呈现，因为它们出现在文档流中。

absolute =＆gt;元素相对于其第一个定位（非静态）祖先元素定位。

fixed =＆gt;该元素相对于浏览器窗口定位。

relative =＆gt;该元素相对于其正常位置定位，因此＆＃34; left：20＆＃34;将20个像素添加到元素的左侧位置。

initial =＆gt;将此属性设置为其默认值。

inherit =＆gt;从其父元素继承此属性。

Answer 2

我根本不是一个经验丰富的开发者，但是我会对这个开发人员进行一次尝试。

position属性应该解决您的问题。尝试使用 position：absolute; 的位置属性设置背景div，并在所有边上添加一些边距填充。

然后，尝试使用 position：relative;

的位置属性设置其他div

但是，您的其他具有相对定位的div也不会受到影响。在将它们设置为相对之后，给它们一些确切的位置，例如“顶部”，“底部”，“左侧”和右侧“基于您想要它们的位置。”

Html和css为什么div会相互影响？

2 个答案: