Question

我需要在父div之外使图像不可见（图像大于父div），而不更改position: fixed。为什么overflow: hidden无效？

感谢您的任何建议！

＆＃13;

.wrap {
  height: 100;
  width: 100;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  position: fixed;
  left: 50;
  top: 50;
  z-index: 1032;
}

＆＃13;

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

＆＃13;

Answer 1

您无法使用隐藏的固定元素溢出。

对于fixed positioning的元素，视口将成为相对元素，而不是父元素。这就是为什么父母的overflow hidden财产变得无关紧要。

我建议您使用position absolute和relative属性来实现结果，然后可以在其上添加另一个包装器fixed position整个事件。

我希望下面的结果是你所期待的。

#wrapper {
  position: fixed;
  top:0;
  left:0;
}
.wrap {
  height: 100px;
  width: 100px;
  background-color: #8087af;
  position: relative;
  z-index: 1031;
  overflow: hidden;
}
.image {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 1032;
}

<div id="wrapper">
  <div class="wrap">
    <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
  </div>
</div>

Answer 2

在图片标记

中删除属性overflow:hidden时，

position:fixed正常工作

#wrapper {
 position: fixed;
 top:0;
 left:0;
}
.wrap {
    height: 100px;
    width: 100px;
    background-color: #8087af;
    position: relative;
    z-index: 1031;
    overflow: hidden;
}
.image {        
    left: 50px;
    top: 50px;
    z-index: 1032;
}

<div id="wrapper">
<div class="wrap"><img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image"></div>
</div>

Answer 3

从position: fixed删除class ="image"，因为当您使用position:fixed时，要从流中删除项目。当你的div有固定的位置时，他的孩子已经固定在窗口上了，但是当你对孩子使用固定位置时，你将它从这个孩子身上移除。

.wrap {
  height: 100;
  width: 100;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  position: fixed; // no need this, use relative or absolute instead
  left: 50;
  top: 50;
  z-index: 1032;
}

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

Answer 4

您没有使用任何unit(px or %)定义div高度或宽度，这就是为什么您的代码无法正常工作

＆＃13;

.wrap {
  height: 100px;
  width: 100px;
  background-color: #8087af;
  position: fixed;
  z-index: 1031;
  top: 0;
  overflow: hidden;
}
.image {
  left: 50px;
  top: 50px;
  z-index: 1032;
}

＆＃13;

<div class="wrap">
  <img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image">
</div>

＆＃13;

Answer 5

＆＃13;

import java.io.*;
import java.util.*;
import java.text.*;
import java.math.*;
import java.util.regex.*;

public class Solution {

    static String feeOrUpfront(int n, int k, int x, int d, int[] p) {
        // Complete this function
        int temp;
        int sum = 0;
        for (int i: p) {
            if (((p[i] / 100) * x) < k)
                temp = k;
            else temp = ((p[i] / 100) * x);
            sum += temp;
        }
        if (sum > d)
            return ("Fee"); //condition checking
        else
            return ("Upfront");
    }
    public static void main(String[] args) {
        Scanner in = new Scanner(System.in);
        int q = in .nextInt();
        for (int a0 = 0; a0 < q; a0++) {
            int n = in .nextInt();
            int k = in .nextInt();
            int x = in .nextInt();
            int d = in .nextInt();
            int[] p = new int[n];
            for (int p_i = 0; p_i < n; p_i++) {
                p[p_i] = in .nextInt();
            }
            String result = feeOrUpfront(n, k, x, d, p); //getting result
            System.out.println(result);
        }
    }
}

＆＃13;

位置：固定子图像 - 溢出：隐藏不起作用

5 个答案: