如何使用CSS让div在我的文本上浮动，同时保持在正确的位置？

这看起来比我可能发出的声音要容易得多。我有一个600px宽的内容div。为了这个论点，它始终在我的页面中间。它在使用如何使用CSS让div在我的文本上浮动，同时保持在正确的位置？

margin: 0px auto;

在这个div的右上角正中间，我已经设置了第二个div，其中包含的选项（这将是股票期权，如Facebook，微博等）。它目前使用CSS控制，没有Javascript。当我的光标远离选项div时，它仍然是一个按钮。当我的光标在选项div上时，它展开。我希望它能够扩展我的内容，但是我的内容仍然围绕原始（在这种情况下）50px方框。

我目前上传的两个测试页面：

Test 1 - 显示选项格在正确的位置（使用float: right;设置），但是当我翻身了，周围的reiszed DIV内容包装。

Test 2 - 这可以确保我的div浮动在我的内容上，但它是使用position: absolute设置的，它仍然在页面的右上角。

我错过了一些东西，我知道我有。有什么建议可以让我一起工作吗？我宁愿单独使用CSS，但我并不反对Javascript，无论是单独使用还是使用jQuery（我更喜欢这种方式，因为我在我的网站中使用的其他脚本使用jQuery框架）。在这个例子中，代码是100％内联的，CSS使用的不是标签，所以如果你想看，它就在那里。

来源

2011-08-11 Nathan Bunn

如果您设置position：relative，测试2将是完美的;上包含div，然后加入一个间隔件的div留在文档的流程：http://jsfiddle.net/sl1dr/GyvM4/

来源

2011-08-12 00:10:26 joshnh

这解决了我的定位问题，谢谢。但是，它还没有解决我的文字内容缠绕在我的按钮的50px框中的其他问题。对此有何建议？我唯一能想到的就是添加与我的按钮具有相同尺寸的第二个div，并将其隐藏在我的选项按钮下方，但如果我可以在没有任何其他HTML的情况下执行此操作，那会更好。 –

我修改了我原来的评论，现在对我来说完美无缺。你必须使用额外的标记，尽管:( – joshnh

如果我必须使用额外的标记，我必须使用它，我只是希望避免它在可能的情况。谢谢。 –

使用具有绝对位置的z-index。设置z-index高于内容。

来源

2011-08-11 23:57:32 DanyZift

这样做没有设置定位属性（'right：0;'或'top：0;'）导致选项位于包装div的左侧。一旦我应用了位置属性，它就位于_page_的右侧，而不是包装div。我试过在第二次测试中，z-index设置为1.当z-index设置为10时，它也是一样的。 –

我还应该指出，我已经尝试过使用'position：relative;'，但也无济于事。我可以上传一个测试页面，显示我的结果。 –

为什么这会得到upvote？绝对定位会自动提高z-索引。 – joshnh

-1

使用position:absolute而不限定顶部/右/左/谷值，并添加一个z-index值。这将保持在绝对位置，但由于它没有真正指定，它将保持在所需的位置，导致它与其他对象重叠。使用margin来移动它。

来源

2011-08-12 00:26:23 casraf

请参考其他回复和评论。此外，您希望在绝对定位的元素上使用顶部/左侧/右侧/底部值而不是边距，因为它从文档流中移除。 – joshnh

其实你不会，因为那样你就不一定能知道到底把它放在哪里。如果你没有指定这些值，那么该元素将停留在它的相对位置上，但会具有“绝对”属性，并且你可以更好地操作它以适应该需求。 – casraf

指定位置：右上角（第一行，问题的第二段）。另外，为什么你需要设置z-index？绝对定位自动将其置于静态定位元素的顶部。 – joshnh

试试这个fiddle

这是凌晨1:30我在哪里，所以这是不是我最好的作品。希望它应该是跨浏览器兼容的。

note我将#options更改为重复使用选项。

来源

2011-08-12 00:29:55

我会从你的时间假设你也是在英国;）根据需要它确实有效（只有在Firefox中测试过，当我醒来时将测试其他人）。怀疑我需要在多个页面上使用它，但是感谢您将它改为适合我的课程。我相信它会派上用场。 –

@Nathan，是的，我是......这只是ie7，我真的很担心，因为它有z-index错误。如果我有机会，我会在今天的工作中测试它。 –

http://jsfiddle.net/7T2c6/我没有多余的DOM。但是我确实移动了锚标签的位置。外部div不再提供样式，只是间距。内部元素是绝对位置，并提供所有样式。只是我的变种。 :)

来源

2011-08-12 01:10:00 Fresheyeball

如何使用CSS让div在我的文本上浮动，同时保持在正确的位置？

回答

相关问题