Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Bourdun
      Проблема с товарами. Не получается перенести товар так, чтобы он был справа от первого, а не под ним

      И да, float:right; переносит вообще в самое право самой страницы
    • 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>  
  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    SkyMasteer
    Newest Member
    SkyMasteer
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, ничего не изменилось
    • Здравствуйте. Уберите строку следующую строку в файле "wp-content/themes/yoo_nano2_wp-child/style.css" *{ box-sizing: border-box; }  
  • Popular Contributors

×
×
  • Create New...