position absolute の指定をしたブロック要素にmargin: 0 auto;が効かない

Question

いつもお世話になってます。

質問は表題の通りです。
下記コードの.serviceContainerにposition absoluteを設置したところ、
margin: 0 auto;が効かなくなってしまいました。

自分でも色々調べたのですが、
position absoluteを設置した要素は存在がレイアウト内から消える（存在しない事になる）ので、移動はtop,left等の設定でのみ可能で、margin: 0 auto;の使用は出来ない、、、のかも？？

というところまでは行き着いたのですが、確信が持てません。

（重なりですが、.serviceContainerを一番上にして別途image1を下に重ねる予定です。）

<div id="contents">
        <div class="serviceContainer">
            <p>sample
              </p> 
            <ul>
              <li>sample</li>
              <li>sample</li>
              <li>sample</li>
              <li>sample</li>
            </ul>
          </div>
      </div><!--contents閉じタグ-->

#contents{
	width: 920px;/*コーディング指示*/
	height:1000px;/*positionを適用させる為に指定*/
	border: 5px solid rgb(15, 224, 195);
	margin: 0 auto;
	position: relative;
}

.serviceContainer{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	z-index: 10;
	width: 90%;
	margin: 0 auto;
	background-color: rgb(136, 91, 150);
}

.serviceContainer li{
	float: left;
	margin-right: 30px;
	/* border: 1px solid rgb(139, 139, 177); */
}

.serviceContainer ul:after{
			 clear: both;
			 content: '';
			 display: block;
	 }

.serviceContainer li::before{
	content: "●";
	color: rgb(43, 121, 164);
}

その他必要情報がありましたら追記しますのでおっしゃってください。
宜しくお願いします。

Answer 1

marginを使用して中央寄せをしたいなら、leftとrightを0指定で。

.serviceContainer {
    left: 0;
    right: 0;
    margin: auto;
}

もしくは、leftのみで、数値を計算するのでもいいと思います。

.serviceContainer {
    left: 5%;/* (100% - 90%) / 2 */
}

Comments

[kato00]

いつも的確なご回答ありがとうございます！！Kszk311さんのお陰でまたまた解決しました！！

Answer 2

絶対配置になったほう（position:absolute）のcssに（z-index:100）を入れてください。
あとブロック要素よりdisplay:inline-blockの方が（.serviceContainer h3とか~ pと）を指定
しておくとtext-align:centerで文章が中央に。その際、background:rgba(0,0,0,.5);をいれておいて
color:#fff;でよく文章が見えます。また、相対配置（position:relative;）の方は近くにメニューバー
があるときはそちらが反応しなくなるのでz-index:-100;をいれておくといいです。

Comments

[kato00]

なるほど！！アドバイスありがとうございます！！