Как решить проблему с overflow: hidden?

Question

[Сергей Тополов]

Открыть в Codepen.io


Суть проблемы:

Фон залит кружочками. Так как надо было сделать их повернутыми на 45, я увеличил ширину и высоту фона, чтобы он покрывал всю площадь. Сначала он был в классе background. Потом перенес в псевдокласс pop_up:after. Чтобы его обрезать по краям, применил к главному блоку pop_up стиль overflow_hidden.

Но главная проблема вот в чем:

Вы сейчас не видите, но в правом верхнем углу есть крестик. Класс pop_up_close. Как его сделать видимым?

Comments

[Максим]

для чего overflow у вас ?

[Сергей Тополов]

Максим Ленский: чтобы обрезать фон по краям главного блока pop_up

[Максим]

Сергей Тополов: так он же наоборот весь пропадает же

[Максим]

Сергей Тополов: вот смотри сам
1) без overflow

2) overflow: hidden

[Сергей Тополов]

Максим Ленский: фон только на форме. ничего не пропадает. на картинке его просто отключил для наглядности, чтобы видели что к чему.

[Максим]

Сергей Тополов: ааа .. понял , в общем вынеси из формы кнопку ... за пределы , js то пофигу по какому элементу закрыть modal , сделай обёртку - чисто для крестика

[Сергей Тополов]

Максим Ленский: просто из-за этого OVERFLOW крестик не видно. может как-то фон нарисовать (такой-же, но другим способом) или с крестиком что-то сделать или еще что.

[alex]

Сергей Тополов:

Как его сделать видимым?

Никак. меняйте разметку или фон делайте картинкой повторяющейся, можно в base64 закодировать, там немного получится

[Максим]

Сергей Тополов: https://codepen.io/Geyan/pen/YVEvNw?editors=1100 что то в этом духе надо

[Сергей Тополов]

Максим Ленский: да это понятно, что так можно. просто я хотел сделать цельный блок без таких вот кусочков снаружи.

[Максим]

Сергей Тополов: тогда нет . overflow всё скроет - либо думай другую структуру

[Сергей Тополов]

Максим Ленский: мда. надо чтото придумать. скорее всего нет выхода. только обертку делать с внешним крестиком.

[alex]

Сергей Тополов:

.popup {
  background-size: 18px 18px;
  background-image: radial-gradient(circle at 2px 2px, #EDECEC 1px, transparent 2px), radial-gradient(circle at 11px 11px, #EDECEC 1px, transparent 2px);
  background-repeat: repeat;
}

[Сергей Тополов]

Alex: круто! ЭТО РЕШЕНИЕ.

Answer 1

[Antowa Kartowa]

С оверфлоу хиден не справишся. Делай еще один общий контейнер для попапа без оверфлоу, внутри него на одном уровне попап-клоуз и попап который с оверфлоу. Надесь понятно объяснил

Comments

[Сергей Тополов]

уже так сделал. это напрашивалось.

[Сергей Тополов]

ан нет. Alex Alex подсказал правильный ответ.

Answer 2

[svetlov97]

Он у тебя в absolute, играй свойствами top и left

Comments

[alex]

поиграйтесь лучше с учебником по css

[Сергей Тополов]

Alex: пока времени на учебники нет. кусками выдергиваю непонятки. попозже займусь книжками

[alex]

Сергей Тополов: я не вам

[svetlov97]

Alex: Всмысле ?

Answer 3

[Виктор]

Или двигайте крестик через absolute левеее как вам посоветовал svetlov97
Или поставите вместо крестика в нижний правый угол надпись вроде "нет, спасибо" делающее тот же функиционал.

Comments

[Сергей Тополов]

это не самодеятельность. PerfectPixel короче. все поправил как писал Alex