С помощью CSS переместите элемент за пределы контейнера, который использует переполнение

У меня есть эта структура ниже, в основном блоки wrapper и content, затем я использую переполнение CSS, чтобы содержимое могло прокручиваться вертикально при переполнении.

Но у меня есть span, который находится внутри content, и я хочу переместить его с помощью position: absolute, но диапазон скрывается, когда он выходит из содержимого из-за свойства переполнения.

.wrapper {
    width: 300px;
    background-color: #2f4050
}

.content {
    position: relative;
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class = "wrapper">
  <div class = "content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class = "tit">Move this span outside</span>
  </div>
  
</div>

Здесь есть какие-нибудь обходные приемы?
Примечание: Редактирование html не вариант

проверьте это: stackoverflow.com/questions/3387489/…

— 01.05.2018 20:31

html css

01.05.2018 20:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

399

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Переместите позицию: относительно обертки следующим образом:

edit: абсолютное положение относится только к первому родительскому элементу с относительным положением. Если вы хотите сделать это относительно всей страницы, вы можете использовать position: fixed, а также альтернативу.

.wrapper {
    width: 300px;
    background-color: #2f4050;
    position: relative;
}

.content {
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class = "wrapper">
  <div class = "content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class = "tit">Move this span outside</span>
  </div>
</div>

01.05.2018 20:34

Другие вопросы по теме

Jekyll: используйте другой CSS локально против Github

Как применить стили к элементу div, щелкнув его дочерние элементы (angular2 / ts)

CSS Transform div не пустой

Позиция 2-го столбца в строке HTML-таблицы

Обрезать длинный текст в каждой ячейке таблицы, но отображать полный текст в каждой ячейке в строке при наведении курсора

Есть ли сокращенное свойство для позиционирования?

Как сделать окно просмотра SVG широким как его контейнер?

Изображение динамического логотипа на странице макета с использованием MVC

Добавление раздела линейного градиента / наложения между двумя контейнерами, чтобы они казались одним целым

Ссылка превышает ширину контейнера

С помощью CSS переместите элемент за пределы контейнера, который использует переполнение

Ответы 1

Другие вопросы по теме

Похожие вопросы