Как я могу использовать CSS, чтобы div плавал над моим текстом, оставаясь в нужном месте?

Question

Это выглядит намного проще, чем я, возможно, заставляю звучать.У меня есть контент div, шириной 600 пикселей.Ради этого аргумента постоянно в середине моей страницы.Он устанавливается посередине с помощью

margin: 0px auto;

В верхнем правом углу этого div я установил второй div, который содержит параметры (это будут параметры общего доступа, например,как Facebook, Twitter и т. д.).В настоящее время он контролируется с помощью CSS, без Javascript.Когда мой курсор находится вне раздела «Параметры», он остается кнопкой.Когда мой курсор находится над элементом Div, он расширяется.Я хочу, чтобы он расширялся по сравнению с моим контентом, но мой контент по-прежнему должен обтекать оригинальную (в данном случае) квадратную рамку размером 50 пикселей.

У меня загружены две тестовые страницы:

Тест 1 - отображает div «Параметры» в правильном месте (задается с помощью float: right;), но когда я переворачиваю его, содержимое оборачивается вокруг вновь созданного div.

Test2 - Это гарантирует, что мой div плавает над моим контентом, но он устанавливается с помощью position: absolute и остается в верхнем правом углу страницы.

Я что-то пропустил, я знаюЯ имею.Есть какие-нибудь предложения относительно того, как я могу заставить это работать вместе?Я бы предпочел исключительно CSS, но я не против Javascript, ни автономного, ни использования jQuery (я бы предпочел это, поскольку другие скрипты, которые я использую на своем сайте, используют инфраструктуру jQuery).Код для этого примера на 100% встроен, CSS использует, а не теги, поэтому, если вы хотите посмотреть, все это есть.

Answer 1

Тест 2 будет идеальным, если вы установите положение: относительное; на содержащий div, а затем добавил разделительный div, оставшийся в потоке документа:

Answer 2

http://jsfiddle.net/7T2c6/ Я получил это без дополнительной DOM. Однако я переместил расположение тега привязки. Внешний div больше не обеспечивает стиль, просто интервал. Внутренние элементы являются абсолютными и обеспечивают весь стиль. Просто мой вариант. :)

Answer 3

Попробуйте это скрипка

Сейчас 1:30, где я нахожусь, поэтому это не моя лучшая работаНадеюсь, он должен быть совместим с разными браузерами.

примечание. Я изменил #options на опции для повторного использования.

Answer 4

используйте z-index с абсолютным положением.Установите z-index выше содержимого.

Answer 5

Используйте position:absolute без определения верхнего / правого / левого / нижнего значения и добавьте значение z-index.Это сохранит его в абсолютном положении, но, поскольку оно не указано, оно останется в требуемом месте, что приведет к перекрытию других объектов.Играйте с margin, чтобы переместить его.