如何使用 CSS 使 div 漂浮在我的文本上，同时保持在正确的位置？
这看起来比我听起来要容易得多。我有一个内容 div，宽 600 像素。为了这个论点，它一直在我的页面中间。 设置在中间。
它使用margin: 0px auto;
在这个 div 的右上角，我设置了第二个 div，其中包含选项（它将是共享选项，例如 Facebook、推特等）。目前它是使用 CSS 控制的，没有 Javascript。当我的光标离开选项 div 时，它仍然是一个按钮。当我的光标位于选项 div 上时，它会展开。我希望它扩展到我的内容，但我的内容仍然环绕原始（在本例中）50px 方框。
我当前上传了两个测试页面：
测试 1 - 这会在正确的位置显示选项 div放置（使用 float: right; 设置），但是当我将鼠标悬停在它上面时，内容会环绕调整后的 div。
测试 2 - 这确保我的 div 漂浮在我的内容上，但它是使用 < 设置的code>position:absolute，并且它保留在页面的右上角。
我错过了一些东西，我知道我错过了。关于如何让它一起工作有什么建议吗？我更喜欢只使用 CSS，但我并不反对 Javascript，无论是独立的还是使用 jQuery（我更喜欢这样，因为我在站点中使用的其他脚本使用 jQuery 框架）。在这个例子中，代码是 100% 内联的，CSS 使用而不是标签，所以如果你想看的话，它都在那里。
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果你设置position:relative;测试2就完美了在包含的 div 上，然后添加一个保留在文档流中的间隔 div： http://jsfiddle.net /sl1dr/GyvM4/
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
使用带有绝对位置的 z-index。将 z-index 设置为高于内容。
use z-index with absolute postion. Set the z-index to be higher than the content.
试试这个 fiddle
现在是凌晨 1:30，所以这不是我最好的作品。希望它应该跨浏览器兼容。
注意我将#options 更改为可重用的选项。
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ 我没有额外的 DOM 就得到了它。不过，我确实移动了锚标记的位置。外部 div 不再提供样式，仅提供间距。内部元素是绝对位置的并提供所有样式。只是我的变体。 :)
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
使用
position:absolute而不定义上/右/左/下值，并添加z-index值。这将使其保持在绝对位置，但由于它并未真正指定，因此它将保留在所需的位置，导致它与其他对象重叠。使用margin来移动它。Use
position:absolutewithout defining a top/right/left/bottom value, and add az-indexvalue. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play withmarginto move it around.