Question

我试图通过为<div>提供一个相对位置属性的CSS选择器以及左边和上边缘的距离来移动框。问题是它不起作用。

选择器显然正常工作，因为如果我取消注释可见性属性，则隐藏图像。这有什么不对？

HTML ：

<body>
  <div id="test_logo">
    <img src="http://uselessproducts.weebly.com/uploads/5/2/5/5/5255421/_6517253_orig.jpg" height="100" width="100"/>
    <span id="test_logo_title">test</span>
  </div>
</body>

CSS：

* { margin:0px; padding:0px; }

html {
    font-family: Verdana, "Lucida Sans Unicode", Arial;
    font-size: 9px;
}

body {
    margin: 9px 0 0;
    background-color: #f37062;
    font-size: 100%;
}

#test_logo {
    /*visibility: hidden;*/
    position: relative;
    left: 100 px;
    top: 200 px;
}

jsFiddle link

Answer 1

您只需删除px之前的空格：

#test_logo {
    position: relative;
    left: 100px;
    top: 200px;
}

Answer 2

取出左边的空格：顶部：#test_logo中的规格，你应该像雨一样正确。

Answer 3

以下是经过修改的CSS，我认为这应该可以解决您的问题，您可以调整#logo的填充以满足您从顶部和侧面的空间需求。

* {margin:0px; padding:0px;}

html{
    font-family: Verdana, "Lucida Sans Unicode", Arial;
    font-size: 9px;
}

body{
    margin: 0 auto;
    background-color: #a37062;
    font-size: 100%;
}


#logo{ 
    padding: 5px;
 }

继承我的小提琴的链接http://jsfiddle.net/r9x5A/3/

但正如其他人所说，你遇到的问题是数字与你的CSS中的'px'之间的空格。

初学者关于CSS定位的查询

3 个答案: