Pomoc pri programovaní, odpovede na otázky / html / Prečo nemôžem umiestniť text na obrázok - html, css

Prečo nemôžem umiestniť text nad obrázok - html, css

Mám jeden div div, vo vnútri mám dve divs, jedno div je obrázok, ďalšie div je text. Chcem vložiť text na obrázok. Nastavil som div s obrázkom position:relativea pre súbor div position:absolute;

HTML:

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/img/adsbg.png" alt="Ad background picture">
</div><!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div><!--Closed div headerAds-->

CSS

.headerAdsPicture{
position: relative;
}
.headerAdsText{
position: absolute;
}

odpovede:

2 pre odpoveď č. 1

použitie

.headerAds{
position: relative;
}
.headerAdsText{
position: absolute;
top:0;
}

Mali by ste používať position:relative na rodič dieťaťa position:absolute chcete použiť

.headerAds{
position: relative;
}
.headerAdsText{
position: absolute;
top:0;
}

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/img/adsbg.png" alt="Ad background picture"/>
</div><!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div><!--Closed div headerAds-->

1 pre odpoveď č. 2

Použite tento kód HTML:

 <div class="headerAds">
<div class="headerAdsText">
<span>This is text!</span>
</div>
<div class="headerAdsPicture">
<img src="/images/http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg" alt="Ad background picture">
</div><!--Closed div headerAdsPicture-->

</div><!--Closed div headerAds-->

css:

.headerAdsPicture{
position: relative;
}
.headerAdsText{
position: absolute;
z-index:2;
margin:10px;
}

0 pre odpoveď č. 3

skúste to bude fungovať

.headerAdsText{
position: absolute;
z-index: 999;
}

0 pre odpoveď č. 4

Vaše chýba

 z-index

Ak obrázok nie je dôležitý ako logo a slúži výlučne na pozadie, mali by ste premýšľať o tom, ako sa zbaviť kontajnera s obrázkami a značky img a jednoducho pridať background-image do textovej obálky.

keďže vo vašej otázke bolo trochu nejasné, môžete tiež vyžadovať použitie top:*distancFromTop*;

.headerAdsPicture {
position: relative;
}
.headerAdsText {
position: absolute;
z-index:9999;
top:0px;
}

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/img/adsbg.png" alt="Ad background picture">
</div>
<!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div>
<!--Closed div headerAds-->

0 pre odpoveď č. 5

Skúste nasledovne

       .headerAdsPicture {
za index:1;
position: relative;
}
.headerAdsText {
position: absolute;
z-index:3;
}

0 pre odpoveď č. 6

pridať top: 0; pre position: absolute

*{
padding: 0;
margin: 0;
}
.headerAds,
.headerAdsPicture{
position: relative;
}
.headerAdsText{
position: absolute; top: 0; left: 0;
}

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/http://khm0.googleapis.com/kh?v=169&hl=ru&x=340&y=480&z=10&token=13274" alt="Ad background picture" />
</div><!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div><!--Closed div headerAds-->

alebo

*{
padding: 0;
margin: 0;
}

.headerAds{
background: url(http://khm0.googleapis.com/kh?v=169&hl=ru&x=340&y=480&z=10&token=13274) no-repeat center top;
height: 256px;
width: 256px;
}

<div class="headerAds">
<!--<div class="headerAdsPicture">
<img src="/images/" alt="Ad background picture" />
</div>-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div><!--Closed div headerAds-->

0 pre odpoveď č. 7

Problém s kódom je, že ste nedali hornú alebo ľavú pozíciu absolútnej div.

dať top hodnota do headerAdsText vyrieši váš problém.

Prvky môžu byť pri použití umiestnené pomocou horných, dolných, ľavých a pravých vlastností position:absolute;

.headerAdsPicture{
position: relative;
}
.headerAdsText{
position: absolute;
top:20px;
left:20px;
}

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/http://i.stack.imgur.com/Lcneh.png" alt="Ad background picture">
</div><!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div>

Dúfam, že to pomôže.

0 pre odpoveď č. 8

Môžete to urobiť aj bez použitia position:relative a position:absolute

Pozrite sa na tento príklad:

.headerAdsText {
background: none repeat scroll 0 0 transparent;
margin: 0 auto;
margin-top: -100px;
text-align:center
width:40%;
}

.headerAds {
margin:0 auto;
text-align:center;
}

<div class="headerAds">
<div class="headerAdsPicture">
<img src="/images/http://placehold.it/350x150" alt="Ad background picture">
</div><!--Closed div headerAdsPicture-->
<div class="headerAdsText">
<span>This is text!</span>
</div>
</div><!--Closed div headerAds-->