如何使具有多个绝对定位元素的div响应

Question

i have a div container with a fixed width and some elements inside it, which are placed using position: absolute. 我有一个具有固定宽度的div容器和其中的一些元素，这些元素使用position：absolute放置。 I've four layers to create an effect with beveled images and an "opening" effect. 我分为四层，以创建带有斜角图像的效果和“开放”效果。

Now this is working, as you can see in my jsfiddle below. 现在可以正常工作了，正如您在下面的我的jsfiddle中看到的那样。 ( jsfiddle - working Example ) The question is, how could i make this responsive. （ jsfiddle-工作示例）问题是，我该如何做出响应。 I mean not for mobile, but for an 100% width layout, where the window can be resized and the following requirements are meet: 我的意思不是用于移动设备，而是用于100％宽度的布局，该窗口可以调整大小并满足以下要求：

the "test" text and the open button are always centered in the three-cornered area in the center “测试”文本和打开按钮始终位于中心的三角区域的中心
the images left and right can be cutted from the left (for the left picture) and the right (for the right picture) 左右图像可以从左（对于左图）和右（对于右图）切出

I tried to work with background-size: cover, but it is not working as expected when I'm resizing the browser window. 我尝试使用background-size：cover，但是在调整浏览器窗口大小时，它无法按预期工作。

Here is my Code (HTML): 这是我的代码（HTML）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="test.css">
        <script src="jquery-1.11.1.js"></script>
    </head>
    <body>
        <div id="slider">
            <div class="img left"></div>
            <div class="img right"></div>
            <div class="text">
                <h1>Test</h1>
                <a href="#">open</a>
            </div>
            <div class="textLeft">
                Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
            </div>
            <div class="textRight">
                Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
            </div>
        </div>
        <script>
            $( "a" ).click(function() {
                $( ".left" ).animate({ 
                        right: "850px",
                      }, 1000 );
                $( ".right" ).animate({ 
                        left: "850px",
                      }, 1000 );
            });
        </script>
    </body>
</html>

CSS: CSS：

#slider{
    background-color: black;
    position: relative;
    height: 500px;
    width: 1000px;
    overflow: hidden;
}

#slider .img.left,
#slider .img.right{
    height: 500px;
    position: absolute; 
    top: 0;
}

#slider .img.left{
    background-image: url(imgLeft.png);
    right: 410px;
    width: 590px;
    z-index: 3;
}

#slider .img.right{
    background-image: url(imgRight.png);
    left: 250px;
    width: 750px;
    z-index: 2;
}

#slider .img.left.open{
    right: 750px;
}

#slider .img.right.open{
    left: 750px;
}

#slider .text{
    color: white;
    position: absolute;
    bottom: 45px;
    height: 100px;
    width: 200px;
    left: 45%;
    z-index: 4;
}

#slider .textLeft,
#slider .textRight{
    position: absolute;
    color: white;
    height: 300px;
    width: 300px;
    z-index: 1;
}

#slider .textLeft{
    right: 100px;
    top: 100px;
}

#slider .textRight{
    left: 100px;
    top: 100px;
}

a{
    color: white;
}

Because it is easier to edit and make suggestions, I've created a JSfiddle: 因为更容易编辑和提出建议，所以我创建了一个JSfiddle：

jsfiddle - working Example jsfiddle-工作示例

Answer 1

I've had a stab on js fiddle and got you a lot further on.. 我对JS小提琴颇有兴趣，可让您更进一步。

Its not completely finished as you need to decide what to do with the second paragraph when it wraps at medium screen widths. 它还没有完全完成，因为当您以中等屏幕宽度换行时，您需要决定如何处理第二段。

It works through a combination of percentage widths and floats. 它通过百分比宽度和浮点数的组合来工作。

The main issue with your version were two things: 版本的主要问题有两点：

All the absolute positioning. 所有的绝对定位。

Using background images. 使用背景图片。

To be responsive, images ideally should be inline as the browser will resize them according to screen width so long as their width and height attributes aren't declared. 为了响应，理想情况下图像应该是嵌入式的，因为浏览器会根据屏幕宽度调整它们的大小，只要不声明其width和height属性即可。

To finish this off you need to decide what to do with that second paragraph, and start looking at media queries to change things around a bit when you get to small screen sizes. 要完成此操作，您需要决定如何处理第二段，并开始查看媒体查询以在屏幕较小时进行一些更改。

I've added a sample query for screens less than 480px, and made a few css tweaks so its nearly there.. (but the text is teeny!) 我为屏幕小于480px的屏幕添加了一个示例查询，并进行了一些CSS调整，因此它几乎就在那里了。

Hope it helps, 希望能帮助到你，

Good luck with it, enjoy!: 祝你好运，享受！：

x

http://jsfiddle.net/h0rhay/2y17p1Lu/6/

Answer 2

The easiest way is to work with different css files. 最简单的方法是使用不同的CSS文件。

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)" />

Then you can easy set the width of your screen: enter link description here 然后，您可以轻松设置屏幕的宽度：在此处输入链接说明

Here is a good link for Screen Resolution. 这是“屏幕分辨率”的良好链接。

如何使具有多个绝对定位元素的div响应

问题描述

2 个解决方案

解决方案1
0 2014-09-11 13:06:57

解决方案2
-1 2014-09-11 09:43:22

如何使具有多个绝对定位元素的div响应

问题描述

2 个解决方案

解决方案1 0 2014-09-11 13:06:57

解决方案2 -1 2014-09-11 09:43:22

解决方案1
0 2014-09-11 13:06:57

解决方案2
-1 2014-09-11 09:43:22