Overflow scroll в блоке с positin absolute

388
05 декабря 2017, 19:29

Есть абсолютно спозиционированная менюшка. Менюшка имеет определенные размеры => если много текста, то должен появиться у нее скрол, но если ставлю overflow: scroll, то пропадает крестик, который находится за пределами этой менюшки, хотя если убрать overflow: scroll - все будет хорошо. Как добиться того, чтоб при абсолютно спозиционированной менюшке, которая имеет скролл, был виден крестик?

.square { 
            width: 200px; 
            height: 400px; 
            background: #ececec; 
            position: absolute; 
            top: 0; 
            left: 0; 
            overflow: scroll; 
        } 
        .square__btn-close { 
            display: block; 
            cursor: pointer; 
            position: absolute; 
            right: -66px; 
            background: #fafafa; 
            height: 48px; 
            width: 48px; 
            text-align: center; 
            top: 0; 
            border-bottom-right-radius: 10px; 
        }
<div style="position: relative;"> 
        <div class="square"> 
            <div class="square__btn-close">X</div> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio ipsum nulla, iusto molestiae saepe sequi ad voluptatum expedita, provident impedit delectus mollitia totam, eos excepturi! Facere ipsa hic, temporibus autem laborum architecto repudiandae praesentium itaque ipsam asperiores, molestiae! Hic, voluptates nobis ea debitis velit alias rerum, similique tempora repudiandae eos mollitia commodi! Possimus explicabo incidunt eligendi doloribus mollitia, ut corrupti tempore itaque temporibus provident vitae eaque aliquam animi voluptates inventore vero officia dolores maxime accusantium illum quod reprehenderit labore. Expedita ullam alias omnis illum dolores neque quam sunt magni accusamus rem aliquid labore earum sint eligendi, possimus non ipsa totam blanditiis. Voluptatem dolore illo excepturi cumque iure? Nostrum ipsum aliquid nesciunt veritatis adipisci quaerat eos culpa magni dolorem porro doloribus ex qui enim fugiat, saepe dicta. Et, impedit laboriosam fugit eaque id, cumque eligendi odit nihil officia aliquam quaerat. Provident quia ipsum quibusdam rem ducimus. Veritatis architecto, officia. Doloremque eveniet iste, fugiat cum recusandae, unde illum architecto mollitia nostrum, sunt blanditiis voluptatum sequi vel ducimus fugit quaerat voluptates, magnam adipisci minima alias eaque beatae. In rem debitis laboriosam, tempore quam pariatur perferendis porro rerum corporis numquam, fugiat architecto totam. Saepe maiores hic a eum non molestiae delectus sunt pariatur minima asperiores, consectetur consequatur ipsa sed libero voluptates corrupti adipisci quasi inventore. Quaerat doloremque delectus nihil velit fuga dolores aspernatur ipsum ad ea a. Quisquam, in distinctio, ipsum atque rerum enim fugiat illum. Iure laudantium ipsum quibusdam corrupti, consequuntur obcaecati perspiciatis beatae fuga doloremque labore consequatur fugiat molestias eos, sunt possimus vero perferendis earum saepe, totam eveniet et dolor aliquam. Dolores in, ea animi odio veniam, expedita iusto distinctio blanditiis officia dignissimos consequatur molestias, quidem quasi facere, excepturi. Corporis dolores recusandae suscipit facilis nam quo accusamus quas incidunt hic, natus ab sequi perferendis blanditiis dolorem vitae quos placeat impedit alias ipsa ipsam. Sit illum, recusandae ipsum ab maxime nulla, vitae a qui, veniam dignissimos perferendis! Adipisci culpa perspiciatis dignissimos, praesentium, beatae repellat iure optio ea quas reprehenderit officia. Eligendi voluptate soluta magni placeat molestias, quo sunt? Fugiat at nostrum velit voluptates. Inventore perferendis quia animi maiores delectus nesciunt, quae sequi cum ad eaque vitae dolor, repellendus esse ea nisi. Dolor earum minima quia repellat quibusdam architecto, voluptatum sed odit hic repudiandae dignissimos molestiae modi laudantium minus magni vitae tenetur, dolores nemo vel. Fugiat aliquid doloremque accusantium quidem, voluptatibus aperiam soluta dicta debitis, deserunt, expedita incidunt repellat neque vero nostrum, autem tempore? Ratione expedita velit tempora aliquid quia quod dignissimos incidunt deleniti vel inventore. Ex, praesentium earum? Nam non vero inventore excepturi, saepe animi officia commodi harum dolor. Dolores praesentium qui a, sapiente vitae. Odit minus similique blanditiis iure, perferendis magnam architecto quia aliquid delectus hic neque nemo quo dicta fuga qui, doloribus vitae ex dolorem ab, odio? Eligendi ut, delectus iste qui labore ad consectetur numquam voluptates explicabo doloribus alias adipisci, obcaecati blanditiis saepe facere pariatur, totam ratione illo culpa quisquam velit! Sequi adipisci amet laudantium voluptatem ipsam rem illum, quibusdam totam doloribus quidem natus dolore praesentium laboriosam facere id voluptate, rerum nesciunt cumque vero dignissimos ducimus commodi quae. Maxime officiis consequatur ipsum porro, id asperiores dolor dolore adipisci natus ipsa officia non assumenda nihil ex rerum magni odio voluptatem facere amet impedit eligendi eos. A quisquam fugit autem doloremque, tenetur! Adipisci, magni aliquam. Quibusdam distinctio, minus eius atque consectetur sequi magni ea libero eligendi culpa excepturi corrupti enim nostrum. Laudantium aliquam voluptatibus in ab saepe tempora aliquid culpa autem doloremque vitae libero pariatur eos nemo quisquam magnam quibusdam, neque, at impedit consectetur veritatis, obcaecati quia. Porro eaque, saepe ut repudiandae doloremque molestias deserunt, officia, expedita consequatur iure culpa cupiditate quisquam, quo unde recusandae amet commodi quaerat nemo optio velit! Accusamus perferendis hic possimus odit deleniti, nisi, corporis quam nobis unde veritatis doloremque ex, aliquam non eligendi officiis, nihil quisquam quia ipsa optio! Voluptatem itaque amet error consectetur dolorum temporibus commodi corporis distinctio animi voluptatum architecto iure eos, dolorem recusandae, deserunt a quia. Illo dignissimos modi dicta, iure quidem odit vero, nulla fugit illum laborum qui! Reiciendis obcaecati voluptates sint quibusdam dolores nostrum mollitia? Obcaecati harum repellat illo quod assumenda, voluptatum dolorum, maiores inventore saepe dolor ab ratione cumque perferendis? Velit sint animi quas, omnis fugiat reprehenderit, dolorem mollitia, assumenda quidem quod aliquid dolorum. Voluptatem perspiciatis, accusantium, voluptatum omnis sequi maxime dolore. Nostrum, ea, quod. Aspernatur quidem cumque delectus accusantium quia, nemo placeat asperiores reiciendis nostrum dolore blanditiis praesentium omnis, ipsum iusto porro facere eius et corporis eum distinctio reprehenderit. Id, odio voluptates officia sequi deleniti, iste recusandae facere veritatis error blanditiis harum tempora quisquam quidem atque culpa, voluptatum ullam, dignissimos est. Eos perferendis a architecto debitis fugiat voluptatum numquam consectetur officia praesentium aliquam, voluptate corrupti nam soluta ullam nemo ut iste tempore magni aspernatur! Ex placeat doloribus numquam quo perspiciatis non, facere illo deserunt doloremque. Corporis, asperiores. Odio, id! 
        </div> 
    </div>

Answer 1

Ну а зачем кнопку делать дочерним элементом?

.square { 
  width: 200px; 
  height: 400px; 
  background: #ececec; 
  position: absolute; 
  top: 0; 
  left: 0; 
  overflow-y: scroll; 
} 
 
.square__btn-close { 
  display: block; 
  cursor: pointer; 
  position: absolute; 
  left: 200px; 
  background: #fafafa; 
  height: 48px; 
  width: 48px; 
  text-align: center; 
  top: 0; 
  border-bottom-right-radius: 10px; 
}
<div style="position: relative;"> 
  <div class="square__btn-close">X</div> 
  <div class="square"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio ipsum nulla, iusto molestiae saepe sequi ad voluptatum expedita, provident impedit delectus mollitia totam, eos excepturi! Facere ipsa hic, temporibus autem laborum architecto repudiandae 
    praesentium itaque ipsam asperiores, molestiae! Hic, voluptates nobis ea debitis velit alias rerum, similique tempora repudiandae eos mollitia commodi! Possimus explicabo incidunt eligendi doloribus mollitia, ut corrupti tempore itaque temporibus 
    provident vitae eaque aliquam animi voluptates inventore vero officia dolores maxime accusantium illum quod reprehenderit labore. Expedita ullam alias omnis illum dolores neque quam sunt magni accusamus rem aliquid labore earum sint eligendi, possimus 
    non ipsa totam blanditiis. Voluptatem dolore illo excepturi cumque iure? Nostrum ipsum aliquid nesciunt veritatis adipisci quaerat eos culpa magni dolorem porro doloribus ex qui enim fugiat, saepe dicta. Et, impedit laboriosam fugit eaque id, cumque 
    eligendi odit nihil officia aliquam quaerat. Provident quia ipsum quibusdam rem ducimus. Veritatis architecto, officia. Doloremque eveniet iste, fugiat cum recusandae, unde illum architecto mollitia nostrum, sunt blanditiis voluptatum sequi vel ducimus 
    fugit quaerat voluptates, magnam adipisci minima alias eaque beatae. In rem debitis laboriosam, tempore quam pariatur perferendis porro rerum corporis numquam, fugiat architecto totam. Saepe maiores hic a eum non molestiae delectus sunt pariatur minima 
    asperiores, consectetur consequatur ipsa sed libero voluptates corrupti adipisci quasi inventore. Quaerat doloremque delectus nihil velit fuga dolores aspernatur ipsum ad ea a. Quisquam, in distinctio, ipsum atque rerum enim fugiat illum. Iure laudantium 
    ipsum quibusdam corrupti, consequuntur obcaecati perspiciatis beatae fuga doloremque labore consequatur fugiat molestias eos, sunt possimus vero perferendis earum saepe, totam eveniet et dolor aliquam. Dolores in, ea animi odio veniam, expedita iusto 
    distinctio blanditiis officia dignissimos consequatur molestias, quidem quasi facere, excepturi. Corporis dolores recusandae suscipit facilis nam quo accusamus quas incidunt hic, natus ab sequi perferendis blanditiis dolorem vitae quos placeat impedit 
    alias ipsa ipsam. Sit illum, recusandae ipsum ab maxime nulla, vitae a qui, veniam dignissimos perferendis! Adipisci culpa perspiciatis dignissimos, praesentium, beatae repellat iure optio ea quas reprehenderit officia. Eligendi voluptate soluta magni 
    placeat molestias, quo sunt? Fugiat at nostrum velit voluptates. Inventore perferendis quia animi maiores delectus nesciunt, quae sequi cum ad eaque vitae dolor, repellendus esse ea nisi. Dolor earum minima quia repellat quibusdam architecto, voluptatum 
    sed odit hic repudiandae dignissimos molestiae modi laudantium minus magni vitae tenetur, dolores nemo vel. Fugiat aliquid doloremque accusantium quidem, voluptatibus aperiam soluta dicta debitis, deserunt, expedita incidunt repellat neque vero nostrum, 
    autem tempore? Ratione expedita velit tempora aliquid quia quod dignissimos incidunt deleniti vel inventore. Ex, praesentium earum? Nam non vero inventore excepturi, saepe animi officia commodi harum dolor. Dolores praesentium qui a, sapiente vitae. 
    Odit minus similique blanditiis iure, perferendis magnam architecto quia aliquid delectus hic neque nemo quo dicta fuga qui, doloribus vitae ex dolorem ab, odio? Eligendi ut, delectus iste qui labore ad consectetur numquam voluptates explicabo doloribus 
    alias adipisci, obcaecati blanditiis saepe facere pariatur, totam ratione illo culpa quisquam velit! Sequi adipisci amet laudantium voluptatem ipsam rem illum, quibusdam totam doloribus quidem natus dolore praesentium laboriosam facere id voluptate, 
    rerum nesciunt cumque vero dignissimos ducimus commodi quae. Maxime officiis consequatur ipsum porro, id asperiores dolor dolore adipisci natus ipsa officia non assumenda nihil ex rerum magni odio voluptatem facere amet impedit eligendi eos. A quisquam 
    fugit autem doloremque, tenetur! Adipisci, magni aliquam. Quibusdam distinctio, minus eius atque consectetur sequi magni ea libero eligendi culpa excepturi corrupti enim nostrum. Laudantium aliquam voluptatibus in ab saepe tempora aliquid culpa autem 
    doloremque vitae libero pariatur eos nemo quisquam magnam quibusdam, neque, at impedit consectetur veritatis, obcaecati quia. Porro eaque, saepe ut repudiandae doloremque molestias deserunt, officia, expedita consequatur iure culpa cupiditate quisquam, 
    quo unde recusandae amet commodi quaerat nemo optio velit! Accusamus perferendis hic possimus odit deleniti, nisi, corporis quam nobis unde veritatis doloremque ex, aliquam non eligendi officiis, nihil quisquam quia ipsa optio! Voluptatem itaque amet 
    error consectetur dolorum temporibus commodi corporis distinctio animi voluptatum architecto iure eos, dolorem recusandae, deserunt a quia. Illo dignissimos modi dicta, iure quidem odit vero, nulla fugit illum laborum qui! Reiciendis obcaecati voluptates 
    sint quibusdam dolores nostrum mollitia? Obcaecati harum repellat illo quod assumenda, voluptatum dolorum, maiores inventore saepe dolor ab ratione cumque perferendis? Velit sint animi quas, omnis fugiat reprehenderit, dolorem mollitia, assumenda 
    quidem quod aliquid dolorum. Voluptatem perspiciatis, accusantium, voluptatum omnis sequi maxime dolore. Nostrum, ea, quod. Aspernatur quidem cumque delectus accusantium quia, nemo placeat asperiores reiciendis nostrum dolore blanditiis praesentium 
    omnis, ipsum iusto porro facere eius et corporis eum distinctio reprehenderit. Id, odio voluptates officia sequi deleniti, iste recusandae facere veritatis error blanditiis harum tempora quisquam quidem atque culpa, voluptatum ullam, dignissimos est. 
    Eos perferendis a architecto debitis fugiat voluptatum numquam consectetur officia praesentium aliquam, voluptate corrupti nam soluta ullam nemo ut iste tempore magni aspernatur! Ex placeat doloribus numquam quo perspiciatis non, facere illo deserunt 
    doloremque. Corporis, asperiores. Odio, id! 
  </div> 
</div>

READ ALSO
css отступы на примерах

css отступы на примерах

Есть несколько вопросов по отступам на конкретных примерах:

637
retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию вместо десктопной

retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию вместо десктопной

retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию сайта с шириной контейнера 940px вместо того чтобы отображать...

238
Как указать относительный путь к файлу, который лежит на уровень ниже?

Как указать относительный путь к файлу, который лежит на уровень ниже?

Как указать относительный путь к файлу, который лежит на 1-2 уровня ниже?

329
Как сделать фон скошенный сбоку?

Как сделать фон скошенный сбоку?

Возможно ли в CSS сделать так, чтобы при ховере на пункты меню фон был не прямоугольный, а скошенный справа?

340