Question

<div id="map1" style=" float: left; margin-left: 150px; border:2px solid grey;">
<div id="red">                            
<div id="green"></div>                            
<img id="map_img" src="images/map/location-map-small.gif" alt="map">
</div>
</div>  
#map1{
margin-top: 10px;
margin-left: 100px;
width : 400px;
height : 400px;
overflow: hidden;
z-index: 105;

}
#green{
background: url("location-map-large.gif");
background-position: 0px 0px;
background-color: green;
height: 100px;
width: 100px;
position: absolute;
overflow: hidden;
display : none;
border: 2px solid grey;    
}
#red{
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
}

我有两个div显示下面列出的缩放效果。问题是向“map1”元素添加“margin-left”样式没有任何影响，我该怎么做才能根据我的要求放置它？

Answer 1

将'position：relative'添加到map1 CSS，然后使用left属性定位绿色和红色。

#map1 {
    background: blue;
    width : 400px;
    height : 400px;
    position: relative;
}

#green {
    background: green;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50px;
}

在此处查看结果： http://jsfiddle.net/u4j2F/

Answer 2

您可以定位元素宽度填充

Live Demo here

Answer 3

这是我的继任者。 :)在这种情况下，我使用positioning : relative作为id“map1”并使用left而不是margin-left来完成我的工作。

绝对定位的元素不显示左边距效果

3 个答案: