How To bring text to front in html [closed]

I have website were the picture is over lapping the text but I want it the other way around.

<p>my text</p> <img href="picture.jpg"> 

I got it so there both in the same place but the picture is still on top so far I've only tired flipping the order of the two lines of code but that did nothing

5 Answers

You can create a wrapper with relative position and give the div absolute position.

.wrapper div { position: absolute; } 

jsFiddle Demo

For further reading:

1. Learn CSS Positioning in Ten Steps
2. An alternative: z-index

use the z index property here's a link that will help

Add some css to set the z index of the text to be greater than the image

HTML

<p>my text</p> <img src="picture.jpg"> 

CSS

#text{ z-index: 1; } #image{ z-index: -1; } 

Note you must position both elements in order for z-index to take effect. Use position:absolute, position:relative, or position:fixed

EDIT: Rahul rightly pointed out the original code used href instead of src. Updated as src is better practice

You can add z-index: 100; after position: fixed; in your CSS.

And try to use src for image instead of href

You need to learn how to use CSS's property called: z-index. Remember that you need to give position to the element you want to give z-index property.