Question

我试图将定位图像添加到wordpress网站，我真的很难弄清楚wordpress帖子中的位置元素而不是页面上的绝对元素。我已经指出了我喜欢的样子：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/

任何帮助都会受到赞赏，我对这一切都很陌生！

谢谢，劳伦

Answer 1

将if添加到您的所有css属性。

编辑; 要使对象位于页面内部，您需要计算宽度/高度并为绝对元素创建空间。在此之后，您需要使用顶部/左侧属性。

position:absolute

在wordpress帖子中定位元素

1 个答案: