Позиционирование элементов в сообщении wordpress

Question

Я пытаюсь добавить позиционированные изображения на сайт wordpress, и я действительно пытаюсь понять, как элементы позиции в сообщениях Wordpress, а не абсолютные на странице. Я pen'd, что я хотел бы, чтобы выглядеть следующим образом: http://codepen.io/Sovvyg/pen/grkvjX

<div class="fullcircle"> 
<img class="section" id="man" src="http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-man-small1.png" /> 
<img class="section" id="section1" src="http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part1-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part1-small-green.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part1-small.png';" />| 
<img class="section" id="section2" src="http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part2-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part2-small-blue.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/LSSI-hover-part2-small.png';" /> 
<img class="section" id="section3" src="http://laurengrace.uk/wp-content/uploads/2016/08/section3-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section3-small-red.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section3-small.png';" /> 
<img class="section" id="section4" src="http://laurengrace.uk/wp-content/uploads/2016/08/section4-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section4-small-turq.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section4-small.png';" /> 
<img class="section" id="section5" src="http://laurengrace.uk/wp-content/uploads/2016/08/section5-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section5-small-ppl.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section5-small.png';" /> 
<img class="section" id="section6" src="http://laurengrace.uk/wp-content/uploads/2016/08/section6-small.png" onmouseover="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section6-small-orange.png';" onmouseout="this.src='http://laurengrace.uk/wp-content/uploads/2016/08/section6-small.png';" /> 
</div> 
<style> 
.fullcirlce {max-width: 100%; position:relative;} 
.section {position: absolute} 
#man {top: 295px; left: 125px;} 
#section1 {top: 310px; left: 25px;} 
#section2 {top: 189px; left: 14px;} 
#section3 {top: 120px; left: 58px;} 
#section4 {top: 120px; left: 204px;} 
#section5 {top:190px; left: 255px;} 
#section6 {top:310px; left:240px;} 

, но когда я добавляю его в WordPress это разбить образы и складывает их, я играл с моим CSS, но просто не могу это исправить: http://laurengrace.uk/tester/

Любая помощь будет оценена, я действительно новичок в этом!

Спасибо, Lauren

Answer 1

Добавить position:absolute все ваши свойства раздела CSS.

Редактировать; Чтобы объект находился внутри страницы, вам нужно рассчитать ширину/высоту и создать пространство для абсолютных элементов. После этого вам нужно сыграть с верхними/левыми свойствами.

.fullcircleparent{ 
    position: relative; 
    width: auto; 
    height: 400px; 
    top: -157px;}