CSS Absolute Position Div vs P

Question

I ran into an issue with absolute position with a nested p tag. This JSFiddle demonstrates the difference. Based on the description on this question and the comment by user1334007 absolute positioning is relative to the first parent. Even though w3schools does not state that, it appears to be the case for div tags. For p tags, it seems that absolute is relative to the page as Michael Zaporozhets states in the SO answer and w3school describes.

With all these links in mind, am I making a mistake with my styles somewhere or are these performing differently? If they perform differently, can someone offer an explanation as to why this happens please? The main reason I am asking is this is a question in the 70-480 certification tests and even though I know the answer the say is correct, I would like to be able to use positioning with confidence going forward.

Code in jsFiddle link (required to have code to submit jsfiddle link so i just put it all in)

<h2>Paragraph Position</h2>
<p class="outer">Hello Outer
    <p class="inner">Hello Inner</p>
</p>
<br/>

<h2>Division Position</h2>
<div class="outer">Hello Outer
    <div class="inner">Hello Inner</div>
</div>

.outer {
    position: relative;
    background-color: red;
    height: 100px;
    width: 500px;
}

.inner {

    position: absolute;
    top: 15px;
    left: 15px;
    background-color: green;
}

score 4 · Accepted Answer · answered Jan 07 '14 at 23:29

4

If you take a look at the HTML (I looked with Chrome Inspector), you'll see that p.inner isn't actually inside p.outer. Because of this, p.inner will be absolutely positioned relative to the first parent element that has relative positioning or the html tag (in this case the html tag).

Edit: I looked in Firefox as well and it seems as if these browsers will convert nested p tags into separate p tags. So a p tag inside of another p tag will result in three sibling p tags.

answered Jan 07 '14 at 23:29

Dennis

233
2
12

I did notice that, it kind of created an extra set p tags before and after. I forgot to mention that. Is that normal with nested p tags? – JabberwockyDecompiler Jan 07 '14 at 23:31
After edit: It does this with IE 11 as well. But that defiantly explains why this is not going off the parent tag. Ill create another question, why html does not do what I tell it to do ;). – JabberwockyDecompiler Jan 07 '14 at 23:33
@JabberwockyDecompiler Yes, it seems as if current browser standards make it so that `p` tags will be automatically closed (see this question: http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong) – Dennis Jan 07 '14 at 23:34
+1 As stated in [W3's specs for HTML5](http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-p-element), it might be different soon! – Maen Jan 07 '14 at 23:35
@JabberwockyDecompiler If you really need a block element inside of a paragraph tag, you can change the css for a tag that can go inside of a `p` tag (e.g. add the rule `display: block` to a `span` tag) - http://jsfiddle.net/8rGTL/2/ – Dennis Jan 07 '14 at 23:37
@Dennis I am not trying to get this to work for a webpage, this was a question on a practice test and I wanted to cover my bases by doing a demo. Personally, I would never place a p inside a p, unless I had a specific requirement. But you know how MS tests can go, they are not always written by the experts :D. Thank you for your help. – JabberwockyDecompiler Jan 08 '14 at 14:36

CSS Absolute Position Div vs P

1 Answers1