Creating text over a div that's marked as position absolute

Question

I'm currently trying to create a website footer which stays positioned at the bottom of the page and have done so, although I'm having a few problems with creating content on top of this div.

.footer{ width:100%; height:80px; background:#333333; margin-top:20px; position:absolute; bottom:0; }

Above is the current CSS styling options I've used however I still have troubles when try to create divs that display on top of this such as copyright notes.

All help would be gratefully appreciated :)!

Do you mean position in or on, because the latter doesn't really exist (or maybe isn't necessary). — user282835
– user282835, Commented Jan 18, 2013 at 17:59
Or do you mean above the footer? And is you footer a sticky footer (looks like it from the CSS)? — tahdhaze09
– tahdhaze09, Commented Jan 18, 2013 at 18:05

user282835 · Accepted Answer · 2013-01-18 17:58:29Z

create a child div like so

<div class="footer"> <div>Copyright Info</div> </div>

And give the child the css position: relative; to prevent inheritance of the position: absolute;

Jason · Accepted Answer · 2013-01-18 17:59:23Z

I'm not sure what kind of content you want, but here are a couple examples in a jsFiddle.

jsFiddle

Basically, if you want a <div> over your footer, put it inside your footer div:

<div class ="footer"> <div class="ele"> <span class="over">Hello World.</span> </div> </div>

And style it giving it dimensions and margins to line it up.

.ele { margin:auto; width:100px; height:100px; background-color:red; }

Collectives™ on Stack Overflow

Creating text over a div that's marked as position absolute

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related