Позиция CSS: фиксированная внутри позиционированного элемента

У меня есть позиционный div, содержимое которого может быть слишком длинным, чтобы появлялись полосы прокрутки (overflow:auto set). Он работает как диалоговое окно в приложении ajax. Я хочу установить кнопку закрытия на правом верхнем углу, поэтому, когда пользователь прокручивает div, он не будет прокручиваться.

Я пробовал его с помощью position:fixed; right:0; top:0, но он помещал кнопку в правой верхней части страницы не в div (в firefox).

Возможно ли это размещение этой кнопки с помощью CSS только без взлома с помощью offsetWidth/Height в js для каждого события прокрутки?

ps: высота и ширина div не являются фиксированным значением, это зависит от размера содержимого и размера окна браузера. Пользователь также может изменить его размер, если захочет.

Ответы

Ответ 1

Вы можете использовать position:fixed;, но без параметров left и top. Затем вы нажмете его вправо, используя margin-left, чтобы поместить его в нужное положение.

Проверьте демо: http://jsbin.com/icili5

Ответ 2

Текущее выбранное решение, похоже, неправильно поняло проблему.

Хитрость заключается в том, чтобы ни использовать абсолютное, ни фиксированное позиционирование. Вместо этого закройте кнопку закрытия за пределами div с позицией , установленной на относительную, и левой плавающей точкой так, чтобы она сразу же была справа от div. Затем установите отрицательное левое поле и положительный индекс z, чтобы он появился над div.

Вот пример:

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>

Ответ 3

Position:fixed дает абсолютную позицию относительно окна BROWSER. так что, конечно, он там.

В то время как position:absolute относится к родительскому элементу, поэтому, если вы поместите свою кнопку <div> внутри контейнера < div> контейнера, она должна указывать, где вы это значили. Что-то вроде

EDIT: благодаря @Sotiris, у которого есть точка, решение может быть достигнуто с использованием позиции: fixed и margin-left. Например: http://jsfiddle.net/NeK4k/

Ответ 4

Я знаю, что это старый пост, но у меня был тот же вопрос, но я не нашел ответа, который устанавливает элемент, фиксированный относительно родительского div. Полоса прокрутки на medium.com является отличным чистым решением для CSS для установки чего-то position: fixed; относительно родительского элемента вместо окна просмотра (kinda *). Это достигается установкой родительского div в position: relative; и с обложкой кнопки с position: absolute;, и кнопка, конечно, position: fixed; выглядит следующим образом:

<div class="wrapper">
  <div class="content">
    Your long content here
  </div>

  <div class="button-wrapper">
    <button class="button">This is your button</button>
  </div>
</div>

<style>
  .wrapper {
    position: relative;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .button {
    position: fixed;
    top: 0;
    width: 50px;
  }
</style>

рабочий пример

* Поскольку фиксированные элементы не прокручиваются со страницей, вертикальное положение по-прежнему будет относиться к окну просмотра, но горизонтальное положение относительно родителя с этим решением.

Ответ 5

Кажется, могут использоваться css-преобразования

"'свойство преобразования устанавливает новую локальную систему координат в элементе",

но... это не кросс-браузер, кажется, что только Opera работает правильно

Ответ 6

Если ваша кнопка закрытия будет текстовой, это очень хорошо для меня:

#close {
  position: fixed;
  width: 70%; /* the width of the parent */
  text-align: right;
}
#close span {
  cursor: pointer;
}

Тогда ваш HTML может быть просто:

<div id="close"><span id="x">X</span></div>

Ответ 7

Попробуйте position: sticky в родительском div элемента, который вы хотите исправить.

Дополнительная информация здесь: http://html5-demos.appspot.com/static/css/sticky.html. Внимание. Проверьте совместимость версий браузера.