Как разместить текст поверх пользовательской формы CSS?

Question

http://jsfiddle.net/77af3/

Я использую CSS3: после того, как создать пользовательскую форму: прямоугольник на вершине треугольника. Текст, который мне нужен, находится внутри прямоугольника и должен быть на вершине треугольника. Тем не менее, нижняя часть букв покрывается треугольником. Интересно, можно ли поместить текст поверх обеих фигур с помощью CSS.

.position { 
border-style: 1px solid red; 
z-index:1; 
color:white; 
font-size:20px; 
text-align:center; 
background:red; 
height: 16px; 
width: 32px; 
position: relative; 
margin: 0 auto; 
padding-top:2px; 
} 

.position:after { 
content: ""; 
z-index:0; 
position: absolute; 
top: 18px; 
left: 0px; 
width: 0; 
height: 0; 
border-left: 16px solid transparent; 
border-right: 16px solid transparent; 
border-top: 16px solid red; 
} 

Answer 1

Изменение z-index:0 к z-index:-1

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

fiddle:

.position { 
    border-style: 1px solid red; 
    z-index:1; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 16px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 
} 
.position:after { 
    content: ""; 
    z-index:-1; 
    position: absolute; 
    top: 18px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

Answer 2

Вы можете использовать z-index:-1. Однако это будет размещено за всеми элементами на странице.

Demo here

В качестве альтернативы, вы можете сделать высоту текстового контейнера с большим line-height:value или height:value и поместите :after псевдо-элемент ниже, так что он не будет перекрывать текст.

Answer 3

Вы можете проверить ссылку ниже:

Fiddle here

.position { 
border-style: 1px solid red; 
z-index:1; 
color:white; 
font-size:20px; 
line-height:15px; 
text-align:center; 
background:red; 
height: 18px; 
width: 32px; 
position: relative; 
margin: 0 auto; 

} 
.position:after { 
content: ""; 
z-index:0; 
position: absolute; 
top: 18px; 
left: 0px; 
width: 0; 
height: 0; 
border-left: 16px solid transparent; 
border-right: 16px solid transparent; 
border-top: 16px solid red; 
} 

Answer 4

Ваш размер шрифта был 20px, ваш рост был 16px, ваш треугольник технически ничего не освещал, там просто не хватает места для отобразите текст, поскольку размер текста слишком велик для объема пространства, которое вы ему дали. Увеличьте высоту вашего поля до размера вашего шрифта.

http://jsfiddle.net/77af3/3/

.position { 
    border-style: 1px solid red; 
    z-index:1; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 20px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 
} 
.position:after { 
    content: ""; 
    z-index:0; 
    position: absolute; 
    top: 22px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

Лично я бы посоветовал против использования г-индекса и такой, чтобы заставить его выглядеть как это делает хорошо. Всегда удостоверьтесь, что контейнер, в который вы помещаете текст, естественно достаточно велик, чтобы его можно было разместить, иначе вы столкнетесь с другими проблемами позже, например, с несколькими буквами, обрезающими края (вот пример этой проблемы, возникающей при использовании z -index solution http://jsfiddle.net/77af3/7/)

Answer 5

Вы просто не можете сделать это так, как хотите. Но есть альтернативы.

Я сделал это:

http://jsfiddle.net/77af3/4/

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

Answer 6

Как насчет этого?

.position { 
    color: transparent; 
    position: relative; 
    z-index: 2; 
    font-size:20px; 
    text-align:center; 
    width: 32px; 
    height: 16px; 
    margin: 0 auto; 
    padding-top:2px; 
    background:red; 
} 
.position:before { 
    content: "MF"; 
    color:white; 
    width: 32px; 
    position: absolute; 
    z-index:1; 
    top: 1px; 
} 
.position:after { 
    content: ""; 
    position: absolute; 
    z-index:0; 
    top: 16px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

http://jsfiddle.net/77af3/5/

Answer 7

Попробуйте положить Z-индекс в .position: после того, как в -1

.position { 
    border-style: 1px solid red; 
    z-index:2; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 16px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 

} 
.position:after { 
    content: ""; 
    z-index:-1; 
    position: absolute; 
    top: 18px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

.text { 
    z-index:100; 
} 

Проверьте это:

http://jsfiddle.net/77af3/6/

Надежда Я помог немного.