css - 如何将一个元素定位在另一个未定义位置的元素旁边？

Question

我是 html/xml/css 的新手，我正在尽最大努力自学。但是，我遇到了 Google 搜索无法解决的问题。

我想将小图像定位在相对于另一个元素的固定位置(？)

我相信这是我要相对于第二个元素定位的元素的代码。

<style type="text/css">
 #wrap { 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;         
    border-left:1px solid #ccc; 
}

 #container {
     width: 500px;
      margin:0 auto;
     padding: 25px;
      font-size:.85em;
     background-color: #fff;
 }

这是部分代码，我正在尝试编辑以将 .xyz 定位到“#wrap”的右侧

.xyz {
    position: ???;
    top: 200px;
    right: ???;
    _position: ???;
    _margin: ???;
    _text-align: right;
    z-index: 1337;
}

我对 SOF 的搜索让我相信我应该按照这个思路做一些事情 - Position an HTML element relative to its container using CSS- 但我做不到。

非常感谢您提供的任何帮助。希望我已经正确解释了我的问题。

Answer 1

如果你想要 .xyz 在 #wrap 但在右边，在你的 上做一个 float:right; .xyz 元素将实现您想要的。

编辑:尝试这样的事情:

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

然后 css 明智的:

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}