Position fixed кнопки внутри блока

@romandillernsk · Регистрация: 19.01.2015

Author24 — интернет-сервис помощи студентам

Коллеги, доброго времени суток, делаю макет и встал на не понятном до селе мне моменте.
Суть такая, есть верстка (модальное окно):

HTML5

    
<div id="one">
        <div id="overlay">
            <button>x</button>
            <div id="content">
                
            </div>
        </div>
    </div>

и к ней стили:

CSS

        * {
            margin: 0;
            padding: 0;
        }
 
        #one {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.8);
        }
        #one #overlay {
            position: absolute;
            width: 50%;
            height: 80%;
            background-color: #fff;
            overflow: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #one #overlay button {
            position: fixed;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
        }
        #one #overlay #content {
            padding: 20px;
        }

По сценарию, в контент добавляется собственно контент, и он если вдруг нужно скроллится. Кнопка для закрытия работает, все нормально, но вот она не фиксится. Если вставить текст длинный то она уходит вместе при скролле.

дайте совет, что не так. Заранее благодарю.

@galawar · 19.04.2018, 12:20

Поменять:

CSS

#one #overlay {
  overflow: hidden;
}
 
#one #overlay button {
  position: absolute;
}
 
#one #overlay #content {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

@romandillernsk · 19.04.2018, 12:23 **[ТС]**

galawar, спасибо за совет, заработало))))))))))))))) правда теперь нужно кнопку двигать от скролла влево.))))))))))))

@galawar · 19.04.2018, 12:24

romandillernsk, ну кнопку передвинуть это уже не сложно)

@romandillernsk · 19.04.2018, 12:26 **[ТС]**

galawar, до низа контента не докрчивает

Добавлено через 1 минуту
galawar, padding убрать нужно просто

@romandillernsk 2 / 2 / 2 Регистрация: 19.01.2015 Сообщений: 59
	19.04.2018, 12:23 [ТС]	3
	galawar, спасибо за совет, заработало))))))))))))))) правда теперь нужно кнопку двигать от скролла влево.)))))))))))) 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	19.04.2018, 12:24	4
	romandillernsk, ну кнопку передвинуть это уже не сложно) 0

@romandillernsk 2 / 2 / 2 Регистрация: 19.01.2015 Сообщений: 59
	19.04.2018, 12:26 [ТС]	5
	galawar, до низа контента не докрчивает Добавлено через 1 минуту galawar, padding убрать нужно просто 0