Question

我正在开发一个web项目，其中我遇到了z-index问题。以下代码只显示我的问题。当我将黄色框移到右边时，它会进入下一个蓝色框。我改变了z-index和位置，但它没有用。我该怎么解决？代码在这里：

@Entity(name = "EmbeddingObject")
@Table(name = "embeddingObjcetTable")
public class EmbeddingObject {

    @ManyToMany(fetch = FetchType.EAGER)
    @JoinTable(name = "embeddingObjcetTable_files",
        joinColumns = {@JoinColumn(name = "embedding_id", referencedColumnName = "id")},
    private Set<File> files;


    @ElementCollection(fetch = FetchType.EAGER)
    @Column(name = "embedding_id")
    @CollectionTable(name="embeddingObjcetTable_fileData",
        joinColumns = {@JoinColumn(name = "embedding_id", referencedColumnName = "id")}))
    @MapKeyJoinColumn(name = "file_id")
    private Map<File, FileData> fileDataMapping;  <-- HERE
}

Answer 1

黄色框已经在蓝色框内，当它向右移动时，它将在下一个蓝色框下面，我将一个z-index值放在包含黄色框的蓝色框上。所以它可以在下一个蓝框之上。

<div style="background-color:red; width: 500px; height: 500px; position:absolute; ">

<div style="background-color:green; width: 400px; height: 400px; position:absolute; ">
    <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative;">


    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;z-index: 10;">

        <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px;"></div>
    </div>
    <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

    </div>
</div>

Answer 2

只需为div设置一个z-index值，该值包含黄色背景。您可以快速查看以下代码段的输出。我设置＆＃34; z-index：99;＆＃34;那个div。

＆＃13;

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
    <div style="background-color:red; width: 500px; height: 500px; position:absolute; ">

        <div style="background-color:green; width: 400px; height: 400px; position:absolute; ">
            <div style="background-color:blue;width: 100px; height: 100px; display:inline-block; position:relative;">


            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

                <div style=" background-color:yellow; width: 50px; height: 50px;  display:block; position:relative; left: 70px; z-index: 99;"></div>
            </div>
             <div style="background-color:blue; width: 100px; height: 100px; display:inline-block; position:relative;">

            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

z-index问题

2 个答案: