无绝对地定位div图像

Question

好吧我有一个小问题，我无法解决。 我希望专家能帮忙:)。

正如您所看到的，我的索引网站上有3个div。 中间没有一个是跨越标题和主要div的输入。 黄色圆圈是div，但是图像*

关于div图像...他们的代码是  这些职位是随机的，不像我所做的那样平等。 HTML

<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>

CSS

#container{position:relative;}

.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}

所以我的问题是当重新调整窗口大小时它将作为div1，它们将相互交叉。我也需要让它负责，但是当使用移动设备时，我需要它们消失，当我在较小的显示器上时，我需要它们来调整它们的尺寸来显示。 定位是否正常，或者我应该使用float？

Answer 1

你的问题很混乱，但我想你想要的是这样的：

在使用媒体查询时可以无问题地调整大小。 以下是mdn：https://developer.mozilla.org/en-US/docs/Web/CSS/@media

的链接

您还可以使用float:left和position:relative作为div，position:absolute作为输入。

这是我的HTML代码：

<div id="container">
    <div id="apple_img" class="circle"></div>
    <div id="weight_img" class="circle"></div>
    <div id="bike_img" class="circle"></div>
    <div><input type="text" value="Type here"></div>
</div>

这是我的CSS代码：

.circle {

}
#apple_img {
    background:green;
    width:100%;
    height:100px;
    float:left;
    position:relative;
}
#weight_img {
    background:red;
    width:100%;
    height:100px;
    float:left;
    position:relative;
}
#bike_img {
    background:blue;
    width:100%;
    height:100px;
    float:left;
    position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    margin-left:-100px;
    top:50px
}

input{
    width:200px;
    height:200px;
    position:relative;
    float:left;
}

我想你的班级＆＃34;圈＆＃34;没有做你想做的事情，然后我评论了它（尝试用它来检查）。

对于代码div > input和input，您可以使用媒体查询正确调整输入的大小。

这是我的jsfiddle：http://jsfiddle.net/dhvuakjr/

Ps。：它的位置，而不是像你写的班级圈子一样定位

希望这对你有所帮助。