Z-index在绝对位置上不起作用？

debugcn 发表于 Dev

彼得·马雷克

为什么我的第二张（黄色）图像与边框图像重叠？我什至设置了z-index，但这没有帮助。div的更改顺序（内部带有图像）也无济于事。

<div>
  <div style="position:relative;">
    <div style="z-index: 1000;">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVFTuIOGSoTi2IijhKFYtgobQVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVKvC8ptIjxweV9nPfO4b77AKFRYarZNQGommWk4jExm1sVA68IYoBqEBGJmXoivZiB5/q6h4/vd1Ge5X3vz9Wn5E0G+ETiOaYbFvEG8cympXPeJw6xkqQQnxNHDGqQ+JHrsstvnIsOCzwzZGRS88QhYrHYwXIHs5KhEk8ThxVVo3wh67LCeYuzWqmxVp/8hcG8tpLmOtUo4lhCAkmIkFFDGRVYiNKukWIiRecxD/+I40+SSyZXGYwcC6hCheT4wf/g92zNwtSkmxSMAd0vtv0xBgR2gWbdtr+Pbbt5AvifgSut7a82gNlP0uttLXwE9G8DF9dtTd4DLneA4SddMiRH8lMJhQLwfkbflAOGboHeNXdurXOcPgAZmtXyDXBwCIwXKXvd4909nXP7905rfj+Gk3KvokkjMAAAAAZiS0dEAC8AOgBJnC6a2AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QMEAwTDlul3FsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPUlEQVRYw+3XsQ0AIAwDsBTx/8uwcgFFwpm6xeqWSrLSmJHmzOOuy93riQ8AAAAAAAAAAAAAAAAA1PfreAPenwM/agAWVAAAAABJRU5ErkJggg==">
    </div>
    <div style="position:absolute;bottom: 0px; height: 16px; overflow:hidden;z-index: 0;">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVFTuIOGSoTi2IijhKFYtgobQVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVKvC8ptIjxweV9nPfO4b77AKFRYarZNQGommWk4jExm1sVA68IYoBqEBGJmXoivZiB5/q6h4/vd1Ge5X3vz9Wn5E0G+ETiOaYbFvEG8cympXPeJw6xkqQQnxNHDGqQ+JHrsstvnIsOCzwzZGRS88QhYrHYwXIHs5KhEk8ThxVVo3wh67LCeYuzWqmxVp/8hcG8tpLmOtUo4lhCAkmIkFFDGRVYiNKukWIiRecxD/+I40+SSyZXGYwcC6hCheT4wf/g92zNwtSkmxSMAd0vtv0xBgR2gWbdtr+Pbbt5AvifgSut7a82gNlP0uttLXwE9G8DF9dtTd4DLneA4SddMiRH8lMJhQLwfkbflAOGboHeNXdurXOcPgAZmtXyDXBwCIwXKXvd4909nXP7905rfj+Gk3KvokkjMAAAAAZiS0dEAC8AOgBJnC6a2AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QMEAwTOJQfScIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAOklEQVRYw+3QMREAIBADsIIK/KvDxTNwWICBdOrWXJPf006pmbo6PPZ2f/0AAAAAAAAAAAAAAAAAgCwE/wM4PGEvCgAAAABJRU5ErkJggg==">
    </div>
  </div>
</div>

Praveen Kumar Purushothaman

具有z-index的元素上没有绝对或相对位置。position: relative在这种情况下，请使用。

<div>
  <div style="position:relative;">
    <div style="z-index: 1000; position:relative;">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVFTuIOGSoTi2IijhKFYtgobQVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVKvC8ptIjxweV9nPfO4b77AKFRYarZNQGommWk4jExm1sVA68IYoBqEBGJmXoivZiB5/q6h4/vd1Ge5X3vz9Wn5E0G+ETiOaYbFvEG8cympXPeJw6xkqQQnxNHDGqQ+JHrsstvnIsOCzwzZGRS88QhYrHYwXIHs5KhEk8ThxVVo3wh67LCeYuzWqmxVp/8hcG8tpLmOtUo4lhCAkmIkFFDGRVYiNKukWIiRecxD/+I40+SSyZXGYwcC6hCheT4wf/g92zNwtSkmxSMAd0vtv0xBgR2gWbdtr+Pbbt5AvifgSut7a82gNlP0uttLXwE9G8DF9dtTd4DLneA4SddMiRH8lMJhQLwfkbflAOGboHeNXdurXOcPgAZmtXyDXBwCIwXKXvd4909nXP7905rfj+Gk3KvokkjMAAAAAZiS0dEAC8AOgBJnC6a2AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QMEAwTDlul3FsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPUlEQVRYw+3XsQ0AIAwDsBTx/8uwcgFFwpm6xeqWSrLSmJHmzOOuy93riQ8AAAAAAAAAAAAAAAAA1PfreAPenwM/agAWVAAAAABJRU5ErkJggg==">
    </div>
    <div style="position:absolute;bottom: 0px; height: 16px; overflow:hidden;z-index: 0;">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSIVFTuIOGSoTi2IijhKFYtgobQVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEydFJ0UVKvC8ptIjxweV9nPfO4b77AKFRYarZNQGommWk4jExm1sVA68IYoBqEBGJmXoivZiB5/q6h4/vd1Ge5X3vz9Wn5E0G+ETiOaYbFvEG8cympXPeJw6xkqQQnxNHDGqQ+JHrsstvnIsOCzwzZGRS88QhYrHYwXIHs5KhEk8ThxVVo3wh67LCeYuzWqmxVp/8hcG8tpLmOtUo4lhCAkmIkFFDGRVYiNKukWIiRecxD/+I40+SSyZXGYwcC6hCheT4wf/g92zNwtSkmxSMAd0vtv0xBgR2gWbdtr+Pbbt5AvifgSut7a82gNlP0uttLXwE9G8DF9dtTd4DLneA4SddMiRH8lMJhQLwfkbflAOGboHeNXdurXOcPgAZmtXyDXBwCIwXKXvd4909nXP7905rfj+Gk3KvokkjMAAAAAZiS0dEAC8AOgBJnC6a2AAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QMEAwTOJQfScIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAOklEQVRYw+3QMREAIBADsIIK/KvDxTNwWICBdOrWXJPf006pmbo6PPZ2f/0AAAAAAAAAAAAAAAAAgCwE/wM4PGEvCgAAAABJRU5ErkJggg==">
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。