流体图像，div得到重新定位 [英] Fluid images, div getting repositioned
问题描述
我正在练习流体图像和divs布局。在下面的代码中，我设法获得了成功的流体图像和流体div。然而，左侧 .leftcolumn （蓝色的一个）中的一个div似乎在垂直下方流入底部的红色div中，只要浏览器窗口重新调整大小到最小的尺寸。请参阅附件截图了解情况。
我知道这个问题可以通过媒体查询来解决。但在这种情况下，我期待了解WHY这是发生了什么，以及任何替代解决方案。
html，body {margin：0px;身高：100％; / * [禁用]宽度：100％; * / left：0px; top：0px; background-color：rgba（255,255,255,1）; font-size：medium;}。wrapper {text-align：center; margin-top：0; margin-left：auto;身高：自动;最大宽度：960px; background-color：rgba（0,0,0,1）; margin-right：auto; position：relative;}。bigcontainer {display：block; / * [禁用]边框：1px纯黑色; * / margin-top：0px;保证金：10％;余量：10％; background-color：rgba（204,204,204,1）;最大宽度：100％; font-size：xx-large;颜色：rgba（255,255,255,1）; top：0px;身高：自动; / * [禁用] margin-bottom：-3px; * / position：relative;} img {max-width：100％;最大高度：100％; / * [禁用] margin-bottom：-9px; * / display：block; } .leftcolumn {width：10％;身高：96％; background-color：rgba（0,0,255,1）;位置：绝对; margin-top：0px; margin-left：0px; left：0px; top：0px;利润率下限：10％; overflow：hidden;}。rightcolumn {width：10％; background-color：rgba（204,255,0,1）;身高：100％;位置：绝对; margin-top：0px; margin-left：0px; top：0px; right：0px;}。text {height：auto;宽度：自动;颜色：rgba（255,255,255,1）;位置：绝对; margin-left：auto; font-size：18px; margin-right：auto; top：0px;}。text2 {height：10％;宽度：自动;颜色：rgba（255,255,255,1）; top：0px;余量：0％; font-size：18px; / * [禁用] float：left; * / margin-right：10％;}。text3 {height：auto;宽度：自动;颜色：rgba（255,255,255,1）; top：0px;余量：5％; font-size：18px; background-color：rgba（0,0,255,1）; float：left;}
< div class =wrapper > < div class =leftcolumn>< / div> < div class =rightcolumn>< / div> < div class =bigcontainer> < img src =http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpgalt =enfield> < div class =text>这是文字。它在中心< / div> < / DIV> < div class =text2>这一个是在文本下方< / div>< / div>
TL; DR：设置 position：relative to 。 text2 。
这是因为您的元素 .text2 未设置为位置：相对于。他默认是 position：static ，这意味着他没有被定位（除了静态以外的任何东西都被认为是定位的）。当一个元素是静态的时候，它没有z-索引并且保持在其他定位元素之下。查看 CSS技巧如何设置相对位置：
...一个是它引入了在该元素上使用z-index的能力，这对于静态定位元素并不适用，即使你没有设置z -index值，这个元素现在将出现在任何其他静态定位元素的顶部。您无法通过在静态定位元素上设置更高的z-index值来对抗它。
在你的情况下，其他定位元素超过了静态 .text2 。
具有非静态定位的元素将始终出现在具有默认静态定位的元素之上。
<对不起，我的英语。 ：）
基于这个答案的评论，我会试着阐述另一个解决方案。
问题在于 .leftcolumn 有 .wrapper ）相关的百分比。
因此，另一种解决方案是将 .leftcolumn 放入 .bigcontainer 中。 .bigcontainer 可容纳 .leftcolumn 和图片。 .leftcolumn 的高度将被设置为100％，现在将 .bigcontainer 作为包含框将有图像高度）。请参阅以下代码片段：
.wrapper {margin：auto;最大宽度：960px; background-color：rgba（0,0,0,1）; position：relative;}。bigcontainer {display：block; background-color：rgba（204,204,204,1）;颜色：rgba（255,255,255,1）;位置：相对;最大宽度：90％;身高：90％;} img {max-width：90％;最大高度：100％;保证金左：10％; display：block;}。leftcolumn {width：10％;身高：100％; background-color：rgba（0,0,255,1）;位置：绝对; left：0px;}。rightcolumn {width：10％; background-color：rgba（204,255,0,1）;身高：100％;位置：绝对; margin-top：0px; margin-left：0px; top：0px; right：0px;}。text {height：auto;宽度：自动;颜色：rgba（255,255,255,1）;位置：绝对; top：0px;余量：12％; font-size：18px;}。text2 {height：10％;宽度：自动;颜色：rgba（255,255,255,1）; top：0px;余量：0％; font-size：18px; margin-right：10％;}。text3 {height：auto;宽度：自动;颜色：rgba（255,255,255,1）; top：0px;余量：5％; font-size：18px; background-color：rgba（0,0,255,1）; float：left;}
<！DOCTYPE html>< ; html lang =pt-BR> < HEAD> <标题>泰斯特< /标题> < link rel =stylesheethref =stylesheet.csstype =text / css> < /头> <身体GT; < div class =wrapper> < div class =rightcolumn>< / div> < div class =bigcontainer> < div class =leftcolumn>< / div> < img src =http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpgalt =enfield> < div class =text>这是文字。它在中心< / div> < / DIV> < div class =text2>这是一个低于文本< / div> < / DIV> < / body>< / html>
。 ：）
I am practicing with fluid images and divs layouts. In the following code, I managed to have a successful fluid image and fluid div's. However, one of the div on the left .leftcolumn (blue colored one) seems to flow vertically below a little into the bottom red div, whenever the browser window is re-sized to the smallest size. Please see the attached screenshot to understand the situation.
I know that this problem can be solved with media queries.But in this case, I am looking to understand as to WHY is this happening, and any alternative solution to this.
html,body {
margin: 0px;
height: 100%;
/* [disabled]width: 100%; */
left: 0px;
top: 0px;
background-color: rgba(255,255,255,1);
font-size: medium;
}
.wrapper {
text-align: center;
margin-top: 0;
margin-left: auto;
height: auto;
max-width: 960px;
background-color: rgba(0,0,0,1);
margin-right: auto;
position: relative;
}
.bigcontainer {
display: block;
/* [disabled]border: 1px solid black; */
margin-top: 0px;
margin-right: 10%;
margin-left: 10%;
background-color: rgba(204,204,204,1);
max-width: 100%;
font-size: xx-large;
color: rgba(255,255,255,1);
top: 0px;
height: auto;
/* [disabled]margin-bottom: -3px; */
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
}
.leftcolumn {
width: 10%;
height: 96%;
background-color: rgba(0,0,255,1);
position: absolute;
margin-top: 0px;
margin-left: 0px;
left: 0px;
top: 0px;
margin-bottom: 10%;
overflow: hidden;
}
.rightcolumn {
width: 10%;
background-color: rgba(204,255,0,1);
height: 100%;
position: absolute;
margin-top: 0px;
margin-left: 0px;
top: 0px;
right: 0px;
}
.text {
height: auto;
width: auto;
color: rgba(255,255,255,1);
position: absolute;
margin-left: auto;
font-size: 18px;
margin-right: auto;
top: 0px;
}
.text2 {
height: 10%;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 0%;
font-size: 18px;
/* [disabled]float: left; */
margin-right: 10%;
}
.text3 {
height: auto;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 5%;
font-size: 18px;
background-color: rgba(0,0,255,1);
float: left;
}
<div class="wrapper">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
<div class="bigcontainer">
<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">
<div class="text">This is text. Its in center</div>
</div>
<div class="text2">This one is below text</div>
</div>
TL;DR: Set position:relative to .text2.
This is happening because your element .text2 is not set with position:relative. He is by default position:static, which means he is not "positioned" (anything but static is considered positioned). When an element is static it have no z-index and stay under the other "positioned" elements. Look at what CSS Tricks say about setting the position to relative:
"... One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element."
In your case the other "positioned" elements are getting above your static .text2.
"Elements with non-static positioning will always appear on top of elements with default static positioning."
HERE for more information about positioning and HERE to understand about z-index.
Sorry about my english. :)
Based on the comments of this answer I'll try to elaborate another solution.
The thing is that the .leftcolumn have height: 96%. The 96% is the percentage related to the containing block (the .wrapper) that have no height set.
So another solution would be to put the .leftcolumn inside the .bigcontainer. The .bigcontainer would accomodate the .leftcolumn and the image. The height of the .leftcolumn would be set to 100%, now measuring the .bigcontainer as the containing box (that will have the image height). See the snippet:
.wrapper {
margin: auto;
max-width: 960px;
background-color: rgba(0,0,0,1);
position: relative;
}
.bigcontainer {
display: block;
background-color: rgba(204,204,204,1);
color: rgba(255,255,255,1);
position: relative;
max-width: 90%;
height: 90%;
}
img{
max-width: 90%;
max-height:100%;
margin-left:10%;
display: block;
}
.leftcolumn {
width: 10%;
height: 100%;
background-color: rgba(0,0,255,1);
position: absolute;
left: 0px;
}
.rightcolumn {
width: 10%;
background-color: rgba(204,255,0,1);
height: 100%;
position: absolute;
margin-top: 0px;
margin-left: 0px;
top: 0px;
right: 0px;
}
.text {
height: auto;
width: auto;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
margin-left: 12%;
font-size: 18px;
}
.text2 {
height: 10%;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 0%;
font-size: 18px;
margin-right: 10%;
}
.text3 {
height: auto;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 5%;
font-size: 18px;
background-color: rgba(0,0,255,1);
float: left;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Teste</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="rightcolumn"></div>
<div class="bigcontainer">
<div class="leftcolumn"></div>
<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">
<div class="text">
This is text. Its in center
</div>
</div>
<div class="text2">
This one is below text
</div>
</div>
</body>
</html>
Hope this helps. :)
这篇关于流体图像，div得到重新定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
