相对于 div 的 CSS 定位

Question

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

这里有一个需要理解的小提琴：http://jsfiddle.net/b9ce626s/

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

我需要将最

右侧的图像定位在红色div 的 95% 处，而不是窗口。我也不希望左图影响右图的位置。

Answer 1

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

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

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

作为旁注，如果您为图像分配带有百分比值的宽度，它现在将基于父元素宽度。

Answer 2

试试这个。

目录

<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%;
        }

小提琴样本

Answer 3

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

Answer 4

给出如下主要position: relative;：

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

此关键字将所有元素布置为好像元素未定位一样，然后调整元素的位置，而不更改布局（从而为元素留下一个间隙，如果它没有被定位）。位置：相对对表*组、表行、表列、表单元格和表标题元素的影响未定义。

JSFiddle Demo