Question

我是这个世界的新手，但是非常喜欢它。如果我提出荒谬的问题，或者事情没有发布得恰到好处，请原谅我的新手身份。请您认为合适。

我试图让一个按钮漂浮在图像上。我已将图像作为内嵌元素引入，以便我可以在Dreamweaver中保留PSD链接，而不是将其作为背景图像和alt属性应用程序引入。我猜测问题是我希望内嵌图像充当块？是对的吗？我已经能够使用按钮的相对定位和图像的绝对定位来使按钮漂浮在图像上，但是然后无法将整个事物放在页面上。非常感谢您的任何建议！

CSS

#container {
    margin: auto;
    display: block;
}

#button {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    position: relative;
}

HTML

<body>

  <div id="container"><img src="index.jpg" width="1200" height="900" /></div> 

  <div id="button"></div>

</body>

Answer 1

在内容div中移动按钮div：

<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>

然后将容器更改为内容的宽度。位置设置为相对。然后，使用绝对，顶部和左侧将按钮放在容器div内。

#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}

#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}

更改内联img元素以充当块元素

1 个答案: