html - 要素を互いの上に配置する

Question

次の画像に示すように、画像によって隠されているドロップダウンがあります。ドロップダウンを画像の上部に配置したいと思います。どうやってやるの？

それはCSSを介して行われますか？

Answer 1

z-indexドロップダウンにグレーターを入れることでこれを行うことができます

スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。

お気に入り

img{
  z-index:5;
}

.dropdown{
   z-index:6;
}

注: z-index は、配置された要素 (position:relative、position:absolute、または position:fixed) でのみ機能します。

.photo-thumb {
    margin-top: 20px;
    position: relative;
    width: 160px;
    z-index: 6;  <------- you have z-index 6 here 
}

と

.menu ul {
    background: none repeat scroll 0 0 #1F2024;
    border-radius: 0 0 5px 5px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 40px;
    transition: opacity 0.25s ease 0.1s;

    z-index: 7; <-----this is the key try z-index 7 here 
}

Answer 2

最善の方法は、実際の画像タグではなく、要素の背景画像にすることです