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
这看起来比我想的要容易得多。我有一个内容div, 600像素宽。为了这个论点，它一直在我的页面中间。它被设置在中间使用
margin: 0px auto;
保证金:0 px汽车;
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.
在这个div的右上角，我设置了第二个div，其中包含选项(它将是共享选项，如Facebook、Twitter等)。它目前是用CSS控制的，没有Javascript。当我的光标离开Options div时，它仍然是一个按钮。当我的光标在Options div上时，它会展开。我想让它扩展到我的内容上，但是我的内容仍然围绕着原始的(在本例中)50px正方形框。
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.
测试1——这将在正确的位置显示Options div(使用float: right;进行设置)，但是当我滚动它时，内容将围绕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.
测试2——这确保我的div浮动在我的内容上，但是它是用position: absolute设置的，并且它仍然在页面的右上角。
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.
我错过了一些东西，我知道我错过了。关于如何让它一起工作，有什么建议吗?我只喜欢CSS，但我不反对Javascript，无论是独立的还是使用jQuery(我更喜欢这样，因为我在站点中使用的其他脚本都使用jQuery框架)。在这个例子中，代码是100%内联的，CSS使用而不是标签，所以如果你想看，它就在那里。
5 个解决方案
#1
3
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/
如果你设置了相对位置，测试2将是完美的;在包含的div上，然后添加一个分隔符div，该div保留在文档流中:http://jsfiddle.net/sl1dr/GyvM4/
#2
1
use z-index with absolute postion. Set the z-index to be higher than the content.
使用绝对位置的z指数。将z索引设置为高于内容。
#3
1
Try this fiddle
试试这个小提琴
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
现在是凌晨1:30，所以这不是我最好的作品。希望它应该是跨浏览器兼容的。
note I changed #options to options for re-use.
注意，我将#选项更改为供重用的选项。
#4
1
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. :)
http://jsfiddle.net/7T2c6/我没有额外的DOM。但是我确实移动了锚标记的位置。外部div不再提供样式，只提供间隔。内部元素是绝对的位置，提供所有的风格。只是我的变体。:)
#5
-1
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. 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 with margin to move it around.
使用位置:绝对，不定义顶部/右侧/左侧/底部值，并添加z索引值。这将保持它处于绝对位置，但由于它没有真正指定，它将保持在必需的位置，导致它与其他对象重叠。玩游戏的边缘，移动它。
#1
3
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/
如果你设置了相对位置，测试2将是完美的;在包含的div上，然后添加一个分隔符div，该div保留在文档流中:http://jsfiddle.net/sl1dr/GyvM4/
#2
1
use z-index with absolute postion. Set the z-index to be higher than the content.
使用绝对位置的z指数。将z索引设置为高于内容。
#3
1
Try this fiddle
试试这个小提琴
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
现在是凌晨1:30，所以这不是我最好的作品。希望它应该是跨浏览器兼容的。
note I changed #options to options for re-use.
注意，我将#选项更改为供重用的选项。
#4
1
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. :)
http://jsfiddle.net/7T2c6/我没有额外的DOM。但是我确实移动了锚标记的位置。外部div不再提供样式，只提供间隔。内部元素是绝对的位置，提供所有的风格。只是我的变体。:)
#5
-1
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. 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 with margin to move it around.
使用位置:绝对，不定义顶部/右侧/左侧/底部值，并添加z索引值。这将保持它处于绝对位置，但由于它没有真正指定，它将保持在必需的位置，导致它与其他对象重叠。玩游戏的边缘，移动它。