Qanday bootstrap glifikonini boshqa mutlaq joylashtirilgan divning ustiga qo'yish kerak

Men kartada uchburchakni chizib, ustiga glifikon qo'yishni istayman. Uchburchak va katta va glif ko'rsatiladi ... lekin har doim pastda va hech qachon tepada emas. Men shunchaki sho'ng'inda glpyhni o'rashga harakat qildim va yuqori va chap joylashishni aniqlashdan foydalanib, glif mutlaqligini qildim, hammasi foydasiz edi.

Asosiy ma'lumotlar (bu yerda https://jsfiddle.net/joshuaohana/4pgjcr47/ ):

<div class="triangle">
            
</div>

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span {
  position: absolute;
  bottom: 50px;
  left: 20px;
}

Mening yagona murakkabligim uchburchak mutlaqo qolishi kerak. Glyphiconni uchburchakning o'rtasida qanday joylashtirishim mumkin?

1
haha yo'q, endi esa soqov bo'lib his qilaman, @LeonFreirega rahmat. Buni javob sifatida yuborishni istasangiz, buni qabul qilaman
qo'shib qo'ydi muallif Joshua Ohana, manba
haha yo'q, endi esa soqov bo'lib his qilaman, @LeonFreirega rahmat. Buni javob sifatida yuborishni istasangiz, buni qabul qilaman
qo'shib qo'ydi muallif Joshua Ohana, manba
Sizning Divingizda bo'lish uchun Span kerakmi?
qo'shib qo'ydi muallif Leon Freire, manba
Rahmat! Javob berdi! :)
qo'shib qo'ydi muallif Leon Freire, manba
Rahmat! Javob berdi! :)
qo'shib qo'ydi muallif Leon Freire, manba

10 javoblar

You can use a negative top value: https://jsfiddle.net/4pgjcr47/8/

.triangle > span {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -65px;
  color: white;
}
2
qo'shib qo'ydi

You can use a negative top value: https://jsfiddle.net/4pgjcr47/8/

.triangle > span {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -65px;
  color: white;
}
2
qo'shib qo'ydi

Spanni Divadan tashqariga chiqarib qo'yishingiz mumkin va u sizning mutlaq joylashuvingiz bilan yaxshi ishlaydi! :)

1
qo'shib qo'ydi

Spanni Divadan tashqariga chiqarib qo'yishingiz mumkin va u sizning mutlaq joylashuvingiz bilan yaxshi ishlaydi! :)

1
qo'shib qo'ydi

Sizda bir nechta muammo bor:

Avval sizning CSS selektoringizning o'ziga xosligi etarlicha aniq emas, shuning uchun siz glyphicon uchun CSS-ning ustki qismini yozib olmaysiz

Ikkinchidan, siz uchburchak chizish uchun chegaralarni ishlatganingizdagina (yuqoridagi haqiqiy uchburchak divdan tashqarida) sizning ustingiz minus bo'lishi kerak.

Quyidagi CSS-ni sinab ko'ring va u har ikki muammoni hal qilish kerak:

span.glyphicon {     //more specific selector
  position: absolute;
  top: -65px;        //move up over border
  left: 20px;
}

Yangiroq fiddle

CSS o'ziga xosligi haqida batafsil ma'lumot

1
qo'shib qo'ydi

Sizda bir nechta muammo bor:

Avval sizning CSS selektoringizning o'ziga xosligi etarlicha aniq emas, shuning uchun siz glyphicon uchun CSS-ning ustki qismini yozib olmaysiz

Ikkinchidan, siz uchburchak chizish uchun chegaralarni ishlatganingizdagina (yuqoridagi haqiqiy uchburchak divdan tashqarida) sizning ustingiz minus bo'lishi kerak.

Quyidagi CSS-ni sinab ko'ring va u har ikki muammoni hal qilish kerak:

span.glyphicon {     //more specific selector
  position: absolute;
  top: -65px;        //move up over border
  left: 20px;
}

Yangiroq fiddle

CSS o'ziga xosligi haqida batafsil ma'lumot

1
qo'shib qo'ydi
<div class="triangle">
            
</div>

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span {
  position: absolute;
  top: 20px;
  left: 20px;
}

Hech qachon mutlaq ham bo'lmaydigan div va div ishlatmang!

1
qo'shib qo'ydi
Nima uchun " Hech qachon div va Divni mutlaqo ishlatmaslik kerak»? Mutlaqo joylashtirilgan modal popupning o'ng tepasida joylashgan mutlaqo tugma haqida nima deyish mumkin? va mutlaqdan nisbiygacha o'zgarish hech narsa qilmaydi - birinchi muammo hali ham shu erda
qo'shib qo'ydi muallif Pete, manba
<div class="triangle">
            
</div>

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span {
  position: absolute;
  top: 20px;
  left: 20px;
}

Hech qachon mutlaq ham bo'lmaydigan div va div ishlatmang!

1
qo'shib qo'ydi
Nima uchun " Hech qachon div va Divni mutlaqo ishlatmaslik kerak»? Mutlaqo joylashtirilgan modal popupning o'ng tepasida joylashgan mutlaqo tugma haqida nima deyish mumkin? va mutlaqdan nisbiygacha o'zgarish hech narsa qilmaydi - birinchi muammo hali ham shu erda
qo'shib qo'ydi muallif Pete, manba

Span: -85px konteyner divining hajmiga mos keladigan salbiy qadriyatlar bilan yuqori pozitsiyasini o'zgartiring. Misol uchun, -70 piksel foydalaning.

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span.glyphicon-exclamation-sign {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -70px;
  color: #FFF;
}
1
qo'shib qo'ydi

Span: -85px konteyner divining hajmiga mos keladigan salbiy qadriyatlar bilan yuqori pozitsiyasini o'zgartiring. Misol uchun, -70 piksel foydalaning.

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span.glyphicon-exclamation-sign {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -70px;
  color: #FFF;
}
1
qo'shib qo'ydi