2014-08-29 42 views
0

我似乎无法得到我想要的东西,并且它使我疯狂,所以请尽可能地帮助! 我想把这个cmc图像放在它的容器/ textarea的外面,但它使我想要摆脱的所有这些空间。我使用的HTML是这样的:放置在容器外部的图像创建不需要的空间

<img style="position: relative; top: -200px; left: 780px; z-index; 1; width: 220px; height: 220px;" src="http://live-it.dk/wp-content/uploads/2014/08/cmc-note.png" alt="CMC - Portfolio" /> 

如果您有任何建议,请让我知道!我对这件事情很陌生,所以非常感谢!

链接到我的网站:live-it.dk

+0

不能帮助没有例子,代码等 – 2014-08-29 14:17:14

+0

是的,对不起,我只是试图添加一个截图,但它不会让我。到该网站的链接是live-it.dk – 2014-08-29 14:19:43

+0

您可能想要在图像上使用绝对定位而不是相对。相对会为元素留下空间,然后移动它,而绝对不会。 – j08691 2014-08-29 14:22:04

回答

0

使用position:absolute。相对定位保持元素采用的原始空白。当你绝对定位它。该元素从文档流中移除并放置在您指定的位置,然后将空白处折叠。你也将不得不改变你的lefttop与这虽然

<img style="position: absolute; top: -200px; left: 780px; z-index; 1; width: 220px; height: 220px;" src="http://live-it.dk/wp-content/uploads/2014/08/cmc-note.png" alt="CMC - Portfolio" /> 
+0

但是,当我使用绝对,然后在大屏幕上,它不会再在正确的位置? – 2014-08-29 14:26:45

+0

@CarinaMurielConradsen当你用像素定位时,定位应该大致精确。你会遇到非常小的屏幕上的问题。在这种情况下,您应该开始使用流体布局(使用您的上下文的百分比进行定位)。这样做是为了您的定位,高度和宽度,并且您的网站看起来会更加成比例。 – 2014-08-29 14:28:51

+0

我会尽力的,非常感谢你! – 2014-08-29 14:32:58

0

更改:

<img style="position: relative; top: -200px; left: 780px; z-index; 1; width: 220px; height: 220px;" src="http://live-it.dk/wp-content/uploads/2014/08/cmc-note.png" alt="CMC - Portfolio" /> 

<img style="position: absolute; top: 110px; left: 1310px; z-index; 1; width: 220px; height: 220px;" src="http://live-it.dk/wp-content/uploads/2014/08/cmc-note.png" alt="CMC - Portfolio"> 

应该工作

编辑: 试试这个

<img style="width: 220px; height: 220px; float: right; margin-top: -210px; margin-right: -89px;" src="http://live-it.dk/wp-content/uploads/2014/08/cmc-note.png" alt="CMC - Portfolio"> 
+0

非常感谢您的工作!现在它在移动设备上运行得并不顺利:/ – 2014-08-29 14:30:38

+0

@CarinaMurielConradsen对于小设备来看看CSS媒体查询。在屏幕变得小于指定尺寸 – 2014-08-29 14:31:55

+0

@CarinaMurielConradsen时,您可以为元素设置特定位置/尺寸,因为gibsonman表示您需要使用媒体查询以使其在移动设备上看起来更好(这完全是一个新问题) – Howli 2014-08-29 14:33:34