ワードプレスのポスト内の要素の配置

Question

私はワードプレスサイトにポジショニングされたイメージを追加しようとしていますが、ページ上の絶対位置ではなくワードプレスのポスト内の位置要素を把握するのは本当に苦労しています。私はそれがどのように見えるしたいのかを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;} 

が、私はそれが画像を破るワードプレスにそれを追加し、それらをスタックするとき、私は私のCSSで周りプレイしましたが、ちょうどそれを得ることができないちょうどそれを得る：http://laurengrace.uk/tester/

私は本当にこのすべてに喜んでいる！

おかげで、 ローレン

Answer 1

すべてのセクションのCSSプロパティにposition:absoluteを追加します。

編集; オブジェクトがページ内に収まるようにするには、幅/高さを計算し、絶対要素のためのスペースを作成する必要があります。 この後、上/左のプロパティで再生する必要があります。

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