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

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

68 голосов
/ 10 февраля 2011

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

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

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

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

Ответы [ 7 ]

82 голосов
/ 10 февраля 2011

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

Проверьте демонстрацию здесь: http://jsbin.com/icili5

14 голосов
/ 08 февраля 2015

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

Хитрость заключается в том, чтобы не использовать абсолютное или фиксированное позиционирование. Вместо этого установите кнопку закрытия вне 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>
5 голосов
/ 10 февраля 2011

Position:fixed дает абсолютную позицию относительно окна БРАУЗЕРА. так что, конечно, он идет туда.

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

РЕДАКТИРОВАТЬ: благодаря @Sotiris, у которого есть точка, решение может быть достигнуто с помощью позиции: фиксированной и слева на полях. Как это: http://jsfiddle.net/NeK4k/

4 голосов
/ 02 августа 2016

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

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

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

2 голосов
/ 03 апреля 2012

Кажется, можно использовать преобразования CSS

"Свойство 'transform' устанавливает новую локальную систему координат в элементе",

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

1 голос
/ 30 июня 2017

Попытка позиция: липкая на родительском div элемента, который вы хотите исправить.

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

0 голосов
/ 26 марта 2014

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

#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>
...