Содержание

javascript — Как сделать overflow: visible для отдельного элемента

Задать вопрос

Вопрос задан

Изменён 5 лет 5 месяцев назад

Просмотрен 727 раз

Здравствуйте, есть абстрактный контейнер, например, .container который имеет свойство overflow: hidden, внутри него есть элемент, например, label, который в свою очередь имеет абсолютное позиционирование, и мне его нужно вынести за блок, разумеется свойство overflow: hidden не дает мне это сделать, как мне решить эту проблему? Может через JS?

.form-group {
  position: relative;
  overflow: hidden;
}

label. error {
  position: absolute;
  left: 0;
  top: 100px;
}
<div>
  <label><br>
            <span>Ваше имя</span><br>
          </label><br>
  <span><input name="text-53" value="" size="40" aria-required="true" aria-invalid="true" type="text"><label for="text-53">Это поле обязательное.</label></span>
</div>
  • javascript
  • html
  • css

2

Только так.

.outer-wrapper {
  position: relative;
  padding: 100px;
  background: white;
}
.wrapper {
  overflow: hidden;
  height: 200px;
  background: darkblue;
}
.overflowed {
  position: absolute;
  width: 50%;
  background: lightblue;
  padding: 50px;
  top: 50px;
  left: 50px;
  font-family: sans-serif;
}
<div>
  <div>
  <div>(Overflowing the wrapper)</div>
  </div>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

overflow hidden CSS — руководство для начинающих

0 ∞

Если вы помещаете текст в блок div, то ширина этого элемента увеличивается в зависимости от области, охватываемой текстом. Но если задать ограничение по ширине или высоте элемента, появляется полоса прокрутки, когда содержимое элемента не может вписаться в него полностью.

Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden.

  • Значения свойства overflow
  • visible
  • hidden
  • scroll
  • auto
  • overflow-x и overflow-y
  • Разбивка длинного текста
  • Поддержка браузерами

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не «заталкивать» содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>

CSS

#box {
	width: 200px;
	height: 100px;
	background-color: #FD2D0F;
	overflow: visible;
}

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Overflow: hidden CSS скрывает содержимое, выходящее за пределы контейнера.

Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.

В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.

Это значение похоже на значение scroll, но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

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

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

HTML

<div>
	<div></div>
</div>

Если ширина внешнего блока составляет 200 пикселей, а внутреннего — 250 пикселей, то задав для внешнего блока overflow-x: auto, мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей, а высота внутреннего блока — 150 пикселей, то overflow-y: auto добавляет вертикальную полосу прокрутки.

Предположим, что одно слово превышает ширину контейнера, и вы не хотите ни скрывать выходящий за пределы контейнера текст, ни добавлять полосу прокрутки. В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap, указав для него значение break-word.

HTML

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus.
 
 
</div>

CSS

#box {
    width: 200px;
    height: 100px;
    background-color: #FD2D0F;
}

Если мы укажем word-wrap: break-word, выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden.

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Вадим Дворниковавтор-переводчик статьи «CSS overflow Property»

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Понимание переполнения CSS: видимое, скрытое, прокрутка и автоматическое | Айман Рахмат

Понимание переполнения CSS: видимое, скрытое, прокрутка и автоматическое | Айман Рахмат | Medium

Чтение: 4 мин.

·

24 ноября 2019 г.

Здесь объясняется, что указывает свойство переполнения CSS и как его использовать.

Свойство overflow в CSS определяет, следует ли обрезать содержимое или добавлять полосы прокрутки, когда содержимое слишком велико для указанной области. Это свойство было бы полезно, чтобы убедиться, что произойдет с содержимым, если оно выйдет за пределы высоты или ширины поля элемента.

Для свойства overflow могут быть установлены следующие значения:

  1. Видимый
  2. Скрытый

Автор: Айман Рахмат

9000 4 299 подписчиков

Front-end разработчик. Ангуляр и Джаваскрипт.

Еще от Аймана Рахмата

Аймана Рахмата

in

RxJS Tap() Utility Operator

В Angular нажмите оператор в RxJS используется для выполнения побочных эффектов для каждого испускаемого значения из наблюдаемого потока , без изменения или…

·3 минуты чтения·16 апреля

Айман Рахмат

в

Передать данные в Ng-Bootstrap Modal в Angular 8

Редактировать профиль пользователя информация во всплывающем окне — Angular версия 8

·4 мин чтения·10 января 2020 г.

Айман Рахмат

в

Экспорт данных в таблицу Excel в Angular 8

Руководство по экспорту данных в таблицу Excel в версии 8 Angular

·3 мин читать · 5 января 2020 г.

Айман Рахмат

в

PWA «Добавить кнопку на главный экран» и удаленная отладка на устройствах Android с Angular 8

Последний шаг для реализации в PWA удаленной отладки на устройствах Android

9000 3

·4 мин читать·13 января 2020 г.

Просмотреть все от Аймана Рахмата

Рекомендовано на Medium

The PyCoach

в

Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT

Освойте ChatGPT, изучив технику быстрого доступа.

·7 мин чтения·17 марта

Christine Vallaure

в

Полное руководство по цвету в дизайне UX/UI

Советы, теория и лучшие практики от новичка до продвинутого

· 11 минут чтения ·20 июня 2021 г.

Списки

Выбор персонала

302 истории·62 сохранения

Истории, которые помогут вам повысить свой уровень на работе

19 историй·20 сохранений

Самосовершенствование 101

20 историй·49 сохранений

Продуктивность 101

20 историй·43 сохранения

Философский технарь

9 проектов помочь вам стать мастером внешнего интерфейса в 2023 году

Где бы вы ни находились Независимо от того, новичок вы или ветеран отрасли, вы постоянно обновляете новые концепции, языки и…

·5 минут чтения·3 февраля

Christina Sa

in

Пример использования UX-дизайна Это меня наняло

Получить работу в сфере UX-дизайна сложно, но один конкретный пример помог мне выделиться из толпы. Я разработал нетрадиционный…

·8 мин чтения·16 марта

Jennifer Bland

Горизонтальная прокрутка с использованием CSS Grid

В этой предыдущей статье я показал, как сделать горизонтальную прокрутку с помощью flexbox.

Недавно меня спросили, как сделать такую ​​же прокрутку, но…

·3 минуты чтения·19 декабря 2022 г.

Михал Малевич

Существует ПЯТЬ уровней навыков пользовательского интерфейса.

Только уровень 4+ позволяет нанять вас.

·6 мин чтения·25 апреля

См. дополнительные рекомендации

Статус

Карьера

Преобразование текста в речь

html — Видимое переполнение не работает с абсолютной позицией в качестве дочернего элемента

9000 4 спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 707 раз

Для следующего HTML-списка я хочу сделать только его прокручиваемым по вертикали, а по горизонтали он должен быть виден по умолчанию.

Даже после того, как overflow-x отображается как видимый, он обрабатывается как прокрутка

 

    <дел>
        
Элемент 1

        <дел>
 

    

    <дел>
        
Элемент 2

        <дел>
<дел>
Элемент 3
<дел>