пишите в div вопрос из-за after/before in css

Question

У меня есть код, который создает заметку с html и css. Но у меня проблема, когда я хочу написать что-нибудь в желтой области.

#slm { 
 
    width: 200px; 
 
    vertical-align:100%; 
 
    height: 150px; 
 
    border-radius: 0 0 10% 0/0 0 40% 0; 
 
    background-color: yellow; 
 
    positon: relative; 
 
} 
 
#slm:before { 
 
    content: ''; 
 
    display: block; 
 
    positon: absolute; 
 
    width: 50px; 
 
    height: 170px; 
 
    border-radius: 0 0 80% 0/0 0 50% 0; 
 
    background-color: white; 
 
}

<div id="slm"> 
 
    
 
     slm<br> 
 
     Hi 
 
</div>

Спасибо.

Answer 1

Первый из все, у вас есть опечатка в стиле position.

Использование absolute позиционирование текста внутри поля sticky путем обертывания его в div.

#slm { 
 
    width: 200px; 
 
    vertical-align:100%; 
 
    height: 150px; 
 
    border-radius: 0 0 10% 0/0 0 40% 0; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
#slm:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 170px; 
 
    border-radius: 0 0 80% 0/0 0 50% 0; 
 
    background-color: white; 
 
} 
 

 
.text{ 
 
     position: absolute; 
 
    top: 10px; 
 
    left: 54px; 
 
    width: 140px; 
 
}

<div id="slm"> 
 
    <div class="text"> 
 
     slm<br> 
 
     Hi 
 
    </div> 
 
</div>

Answer 2

Я думаю, что вы ищете решение, как это: https://jsfiddle.net/neya0v76/4/

обернуть текст в <p> тега и установить его в absolute положение, как это:

HTML

<div id="slm"> 
    <p>slm<br> Hi</p> 
</div> 

CSS

#slm p { 
    position: absolute; 
    top: 0; 
    left: 70px; 
} 

Answer 3

попробуйте следующее:

#slm { 
 
    width: 200px; 
 
    vertical-align:100%; 
 
    height: 150px; 
 
    border-radius: 0 0 10% 0/0 0 40% 0; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
#slm:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 170px; 
 
    border-radius: 0 0 80% 0/0 0 50% 0; 
 
    background-color: white; 
 
} 
 
.text{ 
 
    top: 35px; 
 
    position: absolute; 
 
    position: inherit; 
 
    text-align: center; 
 
}

<div id="slm"> 
 
     <div class="text">slm</div> 
 
     <div class="text">hi</div> 
 
</div>

Answer 4

Во-первых, есть опечатка в коде: вы написали positon вместо позиции!

Во-вторых, вы должны определить верхние & свойства left для правила «position» для обоих идентификаторов в вашем css.

Я бы добавил несколько дополнений к элементу #slm и уменьшил часть ширины. Это должно затем дать вам то результат вы хотели:

Пример: https://jsfiddle.net/0wrkzvzp/

#slm { 
    width: 120px; 
    vertical-align:100%; 
    height: 150px; 
    border-radius: 0 0 10% 0/0 0 40% 0; 
    background-color: yellow; 
    position: relative; 
    top:0; left:0; 
    padding-left: 80px; 
} 
#slm:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top:0; left:0; 
    width: 50px; 
    height: 170px; 
    border-radius: 0 0 80% 0/0 0 50% 0; 
    background-color: white; 
} 

Answer 5

Вы должны использовать position вместо positon!

Лучше иметь контейнер для ваших текстов.

Попробуйте это:

HTML:

<div id="slm"> 
    <div class="inner"> 
    slm 
    <br> 
    hi 
    </div> 
</div> 

CSS:

#slm { 
    width: 200px; 
    vertical-align:100%; 
    height: 150px; 
    border-radius: 0 0 10% 0/0 0 40% 0; 
    background-color: yellow; 
    position: relative; 
} 
#slm:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 50px; 
    height: 170px; 
    border-radius: 0 0 80% 0/0 0 50% 0; 
    background-color: white; 
} 

#slm .inner{ 
    width: 180px; 
    margin-left: 55px; 
} 

Рабочий пример: https://jsfiddle.net/jxsrp86t/2/