如何在背景（标题）上获得缩写名称和图片，同时不移动除图片和文本之外的任何内容？

Question

所以基本上我在尝试将图像、文本和背景颜色放在某个位置时遇到了问题。但当我移动其中一个时，另一个就会向下移动。他们不在一个班，所以我正在想办法解决这个问题。

.Header {
    z-index: index 1;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    position: fixed;
    padding: 30px;
    height:2px;
    box-sizing:border-box;
    background-color:blue;
}

#logo image {
    width: 600;
    z-index: index -1;
    position:absolute;
    float:left;
}


#AbbreviateName {
    z-index: index 1;
    font-size: 40px;
    float:left;
    position:absolute;
    opacity:1;
    color:rgb(255,255,255);
}

虽然我的 HTML 代码是：

<body>
    <img src="./assets/images/itachisignature.png" id="logo" alt="Itachi Eyes"/>
    <h1 class = "Header"></h1>
    <h1 id="AbbreviateName"><strong>A.L.C </strong></h1>        
</body>

我尝试过使用

Z-index: index -1;

,

z-index: index 0;

z-index: index 1;

我还尝试过填充、边距、

position: fixed;

和

position: absolute;

Answer 1

你做错的事情：

```
z-index
```
属性值是数字，您不必在它们之前添加文本
```
#logo image
```
这不是一个有效的选择器。应该是
```
img#logo
```
选择包含
```
<img>
```
```
 的 
```
id
```
 的 
```
logo
```
#AbbreviateName
```
id 应包含更高的
```
z-index
```
以保持在所有内容的前面。

.Header {
    z-index: -1;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    position: fixed;
    padding: 30px;
    height:2px;
    box-sizing:border-box;
    background-color:blue;
}

img#logo{
    width: 600;
    z-index: 1;
    position:absolute;
    float:left;
}


#AbbreviateName {
    z-index: 2;
    font-size: 40px;
    float:left;
    position:absolute;
    opacity:1;
    color:rgb(255,255,255);
}

<img src="https://picsum.photos/600/600?random=1" id="logo" alt="Itachi Eyes"/>
<h1 class = "Header"></h1>
<h1 id="AbbreviateName"><strong>A.L.C </strong></h1>

如何在背景（标题）上获得缩写名称和图片，同时不移动除图片和文本之外的任何内容？

问题描述投票：0回答：1

1个回答

最新问题

如何在背景（标题）上获得缩写名称和图片，同时不移动除图片和文本之外的任何内容？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1