Top in position relative не работает

Почему не работает верхний атрибут для <img>, когда тег <img> является родственным до <p>, но если я удалю тег <p>, это сработает.Top in position relative не работает

CSS:

html,body{ 
     height: 100%; 
} 

img{ 
     position: relative; 
     top: 40%; 

}

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Position</title> 
    <link rel="stylesheet" href="position.css"> 
</head> 
<body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus delectus accusantium nulla eveniet aperiam, quo odit qui voluptas. Illo vel sed ex dolores illum eum architecto a libero atque. Voluptatibus.</p> 
    <img src="http://lorempixel.com/400/200/" alt=""> 
</body> 
</html>

Большое спасибо.

источник

2015-08-19 Mariadicar

Работает отлично [здесь] (http://jsfiddle.net/tusharj/u64kmgu8/) – Tushar

@Tushar в вашей скрипке Я вижу поведение, описанное Mariadicar. Удалите p с firebug или тому подобное, и img внезапно уйдет дальше ... –

Это может помочь вам ... Мое предложение - использовать px вместо%. Он работает нормально.

html,body{ 
    height: 100%; 
} 

img{ 
    position: relative; 
    top: 40px; 

}

https://jsfiddle.net/vy301c07/

источник

2015-08-19 04:39:06

Добавлено поплавка: левый для р теге

Новый Css,

html,body{ 
    height: 100%; 
} 

img{ 
    position: relative; 
    top: 40%; 
} 
p { 
    float:left 
}

See jsfiddle

источник

2015-08-19 05:01:56

CSS: 

html,body{ 
     height: 100%; 
} 

img{ 
     position: relative; 
     top: 40%; 
     float:left; 
}

Использование поплавка: левый; в классе img. Это решит проблему, и изображение будет отображаться в ожидаемом положении (40% от верхней части экрана).

источник

2015-08-19 05:11:47

http://jsfiddle.net/9bxwxfe2/

Используйте контейнер div набор для position: relative;, а затем добавить position: absolute; в IMG.

источник

2015-08-19 05:20:50