How to put text over an image without absolute positioning or setting the image as backbround

前端 未结 6 2052
死守一世寂寞
死守一世寂寞 2020-12-05 05:49

I\'m trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element.
The reason

6条回答
  •  攒了一身酷
    2020-12-05 06:12

    say if you have a parent div and an image and paragraph inside it, give position "relative" to all three of them, and give "z-index" to children, say "20" image and and "21" to Text. the text will appear over the image. and you can adjust the text with "top or left or right or bottom"

    CSS
    #learning{
    margin: 0px;
    padding:0px;
    height: auto;
    width: 100%;
    position: relative;
    
    }
    #learning>img{
    width:inherit;
    height:inherit;
    margin: 0px;
    display: block;
    position: relative;
    z-index: 20;
    }
    #learning > p{
    font-family: 'droid_serifitalic';
    color: white;
    font-size: 36px;
    position: relative;
    top:470px;
    left:500px;
    z-index: 21;
    } 
    

提交回复
热议问题