Sign in to follow this  
BoJITyH

overflow ограничивает абсолютный блок

Recommended Posts

Как сделать, чтобы абсолютный блок не обрезался внешним блоком с ограничением overflow:auto.

Структура такая:

<div style='overflow:auto; width:500px;'>
  <div style='position:relative'>
    <div style='position:absolute; width:1000px;'>
      длииииииииииииииииииинннннннннннннннннннннннныыыыыыыыыыыыыыыыыыйййййййййййййййййййй тееееееееееееееееккккккккккккссссссссссссттттттттт
    </div>
  </div>

</div>

Как сделать, что бы блок с текстом не обрезался внешним дивом с overflow, но при этом позиционировался относительно блока relative? 

z-index менял. В статичный блок абсолютный помещал.

Share this post


Link to post
Share on other sites
4 часа назад, Switch74 сказал:

А при чем тут height, если речь идет о width судя по всему?

Можно так сделать...

Share this post


Link to post
Share on other sites

мне почему-то кажется, что ТС не хочется крутить горизонтальную полосу прокрутки, чтобы увидеть весь текст из этого блока

Share this post


Link to post
Share on other sites
1 час назад, Switch74 сказал:

мне почему-то кажется, что ТС не хочется крутить горизонтальную полосу прокрутки, чтобы увидеть весь текст из этого блока

Кхм, интересный поворот. Я исходил из того, что ТС просто не видит текст (собственно в песочнице его и не видно), поскольку блок relative у него пустой, а абсолютный блок сам по себе ничего не растягивает. Но если смотреть на блок relative как на нечто, что с одной стороны лежать в закрытом контейнере, но при этом позиционироваться не относительно этого контейнера, а относительно... странички?, то такая постановка задачи мне представляется несколько странной. Ведь смысл правил width: 500px и overflow: hidden в том и состоит, что всё, что не влезает в пределы 500 пикселей прокручивать. Если же ТС не хочет видеть полосы прокрутки, то зачем он эти правила назначал?:mellow: В общем, если Вы что-то понимаете, чего я не понимаю, поясните, пожалуйста, а так вообще, хотелось бы какой-то более детальной иллюстрации, чтоб понимать что имелось в виду под "не обрезался", и каким образом планируется "позиционировать".

Мой последний пример с relative вместо absolute понятно что работает несколько по-другому, но в некоторых случаях, это может оказаться не существенным (в приведённом примере, похоже, это как раз не существенно), но так ли это в случае, в котором его планирует его использовать автор - неизвестно. Более того, если исходить из первоначальной информации (как я её понял), то, как я сразу и сказал, работает всё и без позиционирования.

Share this post


Link to post
Share on other sites

К сожалению проблема не в этом.
Сам по себе блок relative заполнен контентом и находится в длинном фиксированном блоке (для того ofverflow и сделано, что бы в этот блок влезал весь контент). Проматывать блок до конца далеко вниз, что бы промотать вправо, очень неудобно.

Сжать блок так же не получается, контент не позволяет. То есть абсолютный блок будет всегда шире фиксированного.

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

 


 

Edited by BoJITyH
мелкие косяки

Share this post


Link to post
Share on other sites
Цитата

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

Это из спеки. То есть, не получится.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By MagenDavid
      Всем привет! Задание:
       
      При размерах экрана от 800px и больше - col1=30%,col2=30%,col3=30% от ширины экрана и рассположены в 3 колонки; При размерах экрана от 500px до 800px - col1=100%,col2=50%,col3=50% от ширины экрана и первый блок сверху, два остальных снизу вместе; При размерах экрана от 0 до 500px - col1=90%,col2=90%,col3=90% от ширины экрана и расположены друг под другом.   Вопрос: как сделать, чтобы в колонках отображалось нужное  значение в %-х в зависимости от размера экрана?       unit.zip
    • By reevierevi
      В общем, написал вот такой код, где красный блок див можно схватить и перетаскивать, но не знаю как наложить ограничение на то, чтобы этот красный блок див не заходил за рамки второго -- серого блока с размером 500х500 пикселей. Как это можно сделать? 
      Хотелось бы увидеть готовый код, чтобы можно было в нём покопаться и разобраться самому. Заранее спасибо.
       
      <html>  <head><title>Moving</title></head>  <body onload= "init()">  <h1 style="margin-left: 650px; color: red;">Адаптировано для Chrome</h1> <div id='serkv' style="position:absolute;width:500;height:500;background-color:grey;left:10;top:10"> <DIV id='kv' style="position:absolute;left:10;top:10;width:50;height:50;background-color:red">  </div>  </div> </body>  <SCRIPT>      kv.onmousedown = function(event) {       kv.style.position = 'absolute';       kv.style.zIndex = 1000;       document.body.appendChild(kv);       moveAt(event.pageX, event.pageY);       function moveAt(pageX, pageY) {         kv.style.left = pageX - kv.offsetWidth / 2 + 'px';         kv.style.top = pageY - kv.offsetHeight / 2 + 'px';       }       function onMouseMove(event) {         moveAt(event.pageX, event.pageY);       }       document.addEventListener('mousemove', onMouseMove);       kv.onmouseup = function() {         document.removeEventListener('mousemove', onMouseMove);         kv.onmouseup = null;       };     };     kv.ondragstart = function() {       return false;     };    </SCRIPT>  </html>  
    • By Fani
      div блок постоянно съезжает, хотя опробовал все. Ответы, что я находил не помогали, смена позиционирования тоже. Может, кто знает как это исправить? Код прилагаю

      HTML
       

      CSS
       

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.