Переместить текст за пределы контейнера по вертикали
У меня есть DIV с некоторыми стилями CSS и TEXT внутри DIV. Как переместить ТЕКСТ за пределы DIV и применить стиль с помощью CSS или JavaScript?
HTML
<div class = "divstyle">TEXT</div>
CSS
.divstyle {
width: 200px;
height: 50px;
background-color: grey;
}
Я создаю полный DIV поверх javascript:
var inputfield = document.createElement("div");
inputfield.textContent = inputfieldData['TEXT'];
inputfield.classList.add("divstyle");
inputfieldsContainer.appendChild(inputfield);
Когда он отображается в браузере, это выглядит так:
+-----------------+
| TEXT |
+-----------------+
Я хочу быть таким:
TEXT
+-----------------+
| |
+-----------------+
Что я пробовал:
.divstyle::before {
top: -50px;
left: -20px;
}
Есть ли способ добавить DIV внутри DIV, используя только CSS? Может быть, решение может состоять в том, чтобы обернуть ТЕКСТ в какой-нибудь тег и применить к нему CSS, но возможно ли сделать это через CSS?
Я думаю, будет просто разместить <p/> с вашим текстом, а затем серый <div/>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Хотя я не понимаю, почему вы этого хотите, вот два способа добиться этого:
- Первый способ:
HTML
<div class = "divstyle">
<span class = "out">TEXT</span>
</div>
CSS
.divstyle {
position: relative;
background-color: grey;
}
.out {
position: relative;
top: -1em;
}
2/Второй способ (после прочтения вашего первого комментария):
HTML
<div class = "divstyle" content = "TEXT"> </div>
CSS
.divstyle {
background-color: grey;
}
.divstyle:before {
content: attr(content);
position: absolute;
top: -1em;
}
Я не могу изменить структуру DIV. есть ли способ использовать свойство содержимого CSS?
Я отредактировал свой ответ, чтобы сделать новую попытку со свойством контента...
Я разобрался, как это сделать.. Мне просто нужна помощь, чтобы поместить это в код. Итак... в CSS создайте .divstyle::before с содержимым: как и во втором способе. но не меняя DIV. оставить как есть. Затем в javascript получите innerText и поместите его в div.setAttribute('content', что вы получаете из innerText)... затем просто удалите ТЕКСТ из DIV с помощью javascript..
Вы можете добавить диапазон, используя другой стиль (здесь: textstyle)
<div class = "divstyle">
<span class = "textstyle">
TEXT
</span>
</div>
что может выглядеть так
.textstyle {
position: absolute;
top: -20px;
font-size: 24px;
}
Здесь важно отметить, что для позиции задано абсолютное значение, поэтому вы можете позиционировать ее относительно ее первого позиционированного элемента-предка.
Я не могу изменить структуру DIV. Я пробовал в css с высотой строки, установленной на 0, но текст поднимается только на половину высоты текста.
Вам также понадобится position: relative; на .divstyle, чтобы убедиться, что div действительно является первым позиционированным элементом-предком.
Вместо того, чтобы устанавливать текст внутри div, вы можете установить содержимое псевдоэлемента как «ТЕКСТ» и сделать следующее.
<div class = "divstyle"></div>
.divstyle {
width: 200px;
height: 50px;
background-color: grey;
position: relative;
margin-top: 50px;
}
.divstyle::before{
content: 'TEXT';
position: absolute;
top: -50%;
}
https://codepen.io/caglar62/pen/LYgaPPW
Я думал о том же, но не знаю, как использовать JavaScript для добавления свойства содержимого в .divstyle::before.
@user21955191, пожалуйста, проверьте этот пример: codepen.io/felquis/pen/JjMEEG
Не совсем понятно, что вы хотите, возможно вам подойдет что-то вроде этого:
div {
display: inline-grid;
grid-auto-rows: 1fr;
}
div:after {
content: '';
border: dashed 1px;
}<div>TEXT</div>
Почему вы хотите отображать содержимое контейнера вне указанного контейнера?