Question

我在div中有两个图像。我想使用相对于父div的百分比来定位这些图像。

这是一个无法理解的小提琴：http://jsfiddle.net/b9ce626s/

我尝试在图片上设置position: absolute;，但它使用窗口宽度。

我需要将最右边的图像定位在红色div的95％处，而不是窗口。我也不希望左图影响正确的位置。

Answer 1

在position: relative上添加#main，以便图片的位置都基于该元素（而不是根元素）。示例：http://jsfiddle.net/b9ce626s/1/

具有相对定位的页面元素使您可以将子元素绝对定位在其中。

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

作为旁注，如果为图像指定一个带百分比值的宽度，它现在将基于父元素宽度。

Answer 2

试试这个..

<强> HTML

<div id="main">
    <img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
    <img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>

<强>的CSS

body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #main {
            display: block;
            width: 50%;
            height: 50%;
            background-color: red;
            position:relative;
        }
        img {
            position: absolute;
            width: 5%;
        }
        #card1 {
            left:5%;
        }
        #card2 {
            right: 5%;
        }

Fiddle Sample

Answer 3

像这样给主position: relative;：

#main {
  display: block;
  width: 50%;
  height: 50%;
  background-color: red;
  position:relative;
}

此关键字列出了所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个间隙，如果它没有被定位）。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

JSFiddle Demo

Answer 4

 #main {
            display: block;
            width: 50%;
            height: 50%;
            background-color: red;
            position: relative;
        }

相对于div的CSS定位

4 个答案: