CSS：z-indexでプルダウンの重なりをコントロールする

2019.01.08
css備忘録
CSS, HTML, z-index, カテゴリリンク, ネットショップ, プルダウン, ヘッダー, リスト, 商品ページ, 楽天市場, 重なり

1. 重なりの上下をコントロール：z-index (CSS)
- 1.1. z-indexの動作
- 1.2. 記載したCSSスクリプトを貼り付けます

重なりの上下をコントロール：z-index (CSS)

ショップのヘッダーを変更しようと四苦八苦したため備忘録を記します。

四苦八苦の原因はリストの重なり。だって参考文献にしたサイトに間違いが書いてあったんだもん！

はい、この備忘録は正しいものを記載しとくためのメモでございます。

z-indexの動作

cssにて指定します。

z-index:数字

この数字は小さいもから順に重ねられていきます。
つまり、【1】が一番下。数字は番号が飛んでいても問題ありません。【1】の次が【100】でもOK。

参考にしたサイトはこれが逆転してたんですよ。
いくら書いても思った動作とならず、でもそのサイトを信用していたので他の箇所に問題があると思って迷走したんです。

あるあるですね。

記載したCSSスクリプトを貼り付けます

/* ------ リストタグ -------------------------------------------------- */
<style>
UL
	{
	list-style:none; 
	margin-top:0px; 
	padding-left:0px; 
	margin-left:0px; 
	margin-bottom:0px;
	}
UL.footer LI
	{
	padding:0px; 
	width:63; 
	@height:63; 
	float:left; 
	margin:0px;
	}
/* ヘッダーcategoryセレクトボタン */
/* 1段目*/
ul.header-dropmenu 
	{
  	list-style: none;
  	width: 100%;
  	height: 40px;
  	margin: 0 auto;
  	padding: 0;
  	display: table;
  	table-layout: fixed;
	}
	
	ul.header-dropmenu > li 
		{
  		position: relative;
  		display: table-cell;
  		vertical-align: middle;
  		border: 1px solid #AAA;
  		background: #AAA; /* 背景色*/
  		z-index: 3; /* 重なり */
		}
	ul.header-dropmenu li a 
		{
  		display: block;
 		text-align: center;
		line-height: 40px;
		font-weight: bold;
  		text-decoration: none;
  		font-size: 15px;
  		color:#fff;
		}
	ul.header-dropmenu > li:hover 
		{
  		background: #ff9900;
  		border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  		border-bottom: none;
		}

		ul.header-dropmenu li ul 
			{
  			visibility: hidden;
  			width: 100%;
  			list-style: none;
  			position: absolute;
  			top: 100%;
  			left: -1px;
  			margin: 0;
  			padding: 0;
  			border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  			border-top: none;
			}
		ul.header-dropmenu li:hover ul 
			{
			visibility: visible;
			}

			ul.header-dropmenu li ul li
				{
  				background: #fff;
  				transition: all .2s ease;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li ul li a
				{
				color:#000;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li ul li a:hover
				{
				color:#fff;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li:hover ul li:hover
				{
  				background: #ff9900;
  				z-index: 3; /* 重なり */
				}
/*2段目*/
ul.header-dropmenu2 
	{
  	list-style: none;
  	width: 100%;
  	height: 40px;
  	margin: 0 auto;
  	padding: 0;
  	display: table;
  	table-layout: fixed;
  	border-top: solid 1px #ffffff;
	}
	
	ul.header-dropmenu2 > li 
		{
  		position: relative;
  		display: table-cell;
  		vertical-align: middle;
  		border: 1px solid #AAA;
  		background: #AAA; /* 背景色*/
  		z-index: 1; /* 重なり */
		}
	ul.header-dropmenu2 li a 
		{
  		display: block;
 		text-align: center;
		line-height: 40px;
		font-weight: bold;
  		text-decoration: none;
  		font-size: 15px;
  		color:#fff;
		}
	ul.header-dropmenu2 > li:hover 
		{
  		background: #ff9900;
  		border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  		border-bottom: none;
		}

		ul.header-dropmenu2 li ul 
			{
  			visibility: hidden;
  			width: 100%;
  			list-style: none;
  			position: absolute;
  			top: 100%;
  			left: -1px;
  			margin: 0;
  			padding: 0;
  			border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  			border-top: none;
			}
		ul.header-dropmenu2 li:hover ul 
			{
			visibility: visible;
			}

			ul.header-dropmenu2 li ul li
				{
  				background: #fff;
  				transition: all .2s ease;
  				z-index: 2; /* 重なり */
				}
			ul.header-dropmenu2 li ul li a
				{
				color:#000;
				}
			ul.header-dropmenu2 li ul li a:hover
				{
				color:#fff;
				}
			ul.header-dropmenu2 li:hover ul li:hover
				{
  				background: #ff9900;
				}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

/* ------ リストタグ -------------------------------------------------- */

<style>

{

list-style:none;

margin-top:0px;

padding-left:0px;

margin-left:0px;

margin-bottom:0px;

}

UL.footer LI

{

padding:0px;

width:63;

@height:63;

float:left;

margin:0px;

}

/* ヘッダーcategoryセレクトボタン */

/* 1段目*/

ul.header-dropmenu

{

list-style: none;

width: 100%;

height: 40px;

margin: 0 auto;

padding: 0;

display: table;

table-layout: fixed;

}

ul.header-dropmenu > li

{

position: relative;

display: table-cell;

vertical-align: middle;

border: 1px solid #AAA;

background: #AAA; /* 背景色*/

z-index: 3; /* 重なり */

}

ul.header-dropmenu li a

{

display: block;

text-align: center;

line-height: 40px;

font-weight: bold;

text-decoration: none;

font-size: 15px;

color:#fff;

}

ul.header-dropmenu > li:hover

{

background: #ff9900;

border: 1px solid #aaa; /* マウスオーバー時の枠線 */

border-bottom: none;

}

ul.header-dropmenu li ul

{

visibility: hidden;

width: 100%;

list-style: none;

position: absolute;

top: 100%;

left: -1px;

margin: 0;

padding: 0;

border: 1px solid #aaa; /* マウスオーバー時の枠線 */

border-top: none;

}

ul.header-dropmenu li:hover ul

{

visibility: visible;

}

ul.header-dropmenu li ul li

{

background: #fff;

transition: all .2s ease;

z-index: 3; /* 重なり */

}

ul.header-dropmenu li ul li a

{

color:#000;

z-index: 3; /* 重なり */

}

ul.header-dropmenu li ul li a:hover

{

color:#fff;

z-index: 3; /* 重なり */

}

ul.header-dropmenu li:hover ul li:hover

{

background: #ff9900;

z-index: 3; /* 重なり */

}

/*2段目*/

ul.header-dropmenu2

{

list-style: none;

width: 100%;

height: 40px;

margin: 0 auto;

padding: 0;

display: table;

table-layout: fixed;

border-top: solid 1px #ffffff;

}

ul.header-dropmenu2 > li

{

position: relative;

display: table-cell;

vertical-align: middle;

border: 1px solid #AAA;

background: #AAA; /* 背景色*/

z-index: 1; /* 重なり */

}

ul.header-dropmenu2 li a

{

display: block;

text-align: center;

line-height: 40px;

font-weight: bold;

text-decoration: none;

font-size: 15px;

color:#fff;

}

ul.header-dropmenu2 > li:hover

{

background: #ff9900;

border: 1px solid #aaa; /* マウスオーバー時の枠線 */

border-bottom: none;

}

ul.header-dropmenu2 li ul

{

visibility: hidden;

width: 100%;

list-style: none;

position: absolute;

top: 100%;

left: -1px;

margin: 0;

padding: 0;

border: 1px solid #aaa; /* マウスオーバー時の枠線 */

border-top: none;

}

ul.header-dropmenu2 li:hover ul

{

visibility: visible;

}

ul.header-dropmenu2 li ul li

{

background: #fff;

transition: all .2s ease;

z-index: 2; /* 重なり */

}

ul.header-dropmenu2 li ul li a

{

color:#000;

}

ul.header-dropmenu2 li ul li a:hover

{

color:#fff;

}

ul.header-dropmenu2 li:hover ul li:hover

{

background: #ff9900;

}

</style>

これでul、liでリストを作成すればOK

/* ------ HTML -------------------------------------------------- */
<ul class="header-dropmenu">
  <li>
    <a href="#">フライパン</a>
    <ul>
      <li><a href="#">サイズ別</a></li>
      <li><a href="#">形状別</a></li>
      <li><a href="#">素材別</a></li>
    </ul>
  </li>
  <li>
    <a href="#">鍋</a>
    <ul>
      <li><a href="#">サイズ別</a></li>
      <li><a href="#">形状別</a></li>
      <li><a href="#">素材別</a></li>
    </ul>
  </li>
</ul>
<ul class="header-dropmenu2">
  <li>
    <a href="#">掃除道具</a>
    <ul>
      <li><a href="#">ほうき塵取り</a></li>
      <li><a href="#">雑巾</a></li>
      <li><a href="#">ほこり取り</a></li>
      <li><a href="#">掃除シート</a></li>
    </ul>
  </li>
  <li>
    <a href="#">洗濯道具</a>
    <ul>
      <li><a href="#">カゴ</a></li>
      <li><a href="#">ネット</a></li>
      <li><a href="#">物干し竿</a></li>
      <li><a href="#">ハンガー</a></li>
      <li><a href="#">ピンチ</a></li>
    </ul>
  </li>
</ul>

/* ------ HTML -------------------------------------------------- */

<li>

<a href="#">フライパン</a>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

<li>

<ul>

<li><a href="#">ほうき塵取り</a></li>

<li><a href="#">ほこり取り</a></li>

<li><a href="#">掃除シート</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

いやぁ～つかれた。

でももう間違えません！

CSS：z-indexでプルダウンの重なりをコントロールする

重なりの上下をコントロール：z-index (CSS)

z-indexの動作

記載したCSSスクリプトを貼り付けます

関連

新年あけちゃいました…。 2019.01.06

マルコフ連鎖用テーブルの構造 2019.01.09

CSS：z-indexでプルダウンの重なりをコントロールする

重なりの上下をコントロール：z-index (CSS)

z-indexの動作

記載したCSSスクリプトを貼り付けます

共有:

関連

新年あけちゃいました…。 2019.01.06

マルコフ連鎖用テーブルの構造 2019.01.09