positionを指定した要素をしていない要素の後ろに持っていきたい

Question

下記のような、片方のdivにpositionのabsoluteが指定してあり、もう片方に指定指定無い場合、指定なしの方を前に持ってくるにはどうしたらいいでしょうか。
z-indexもためしたのですが、positionがabsoluteだとfloatと同じく通常の要素の重ね順からは外れてしまうようで、ききませんでした。
お知恵をおかしいただけると幸いです。よろしくお願いします。

追記しました。
例えばposが画面全体にあり、nonposが後ろから透けているということしたいです。
今のままだとposがposition: 'absolute'で前にきて重なる感じになると思います。
これを、position: 'absolute';を指定しながらnonposの後ろに重なるようにしたいです。

<div class="container">
  <div class="pos">指定あり</div>
  <div class="nonpos">指定なし</div>
</div>

.container{
  width: 100%;
  height: 100%;
}
.pos{
　position: 'absolute';
  background-color: red;
  width: 100%;
  opacity: 0.5;
}
.nonpos{
　position: 'absolute';
  background-color: blue;
 width: 50px;
 height: 50px;
 border-radius: 25px;
}

Comments

[azuapricot]

提示されたコードだけでは何がやりたいかよくわからないのですが・・・。

[yamato_user]

同じく質問内容がわかりません

[s8_chu]

念のため確認ですが、質問者さんが実現したい動作は、このような動作でしょうか？
https://codepen.io/anon/pen/PVzwpe

[azuapricot]

まぁたぶんそうですよね、position:absolute設定した要素のz-indexを下げればいいだけなきが。

[ois]

ありがとうございます。解決しました。
要素のz-indexを0以上で指定するとだめだったのでできないと思い込んでいました。

Answer 1

posのz-indexを-1にしたら実現できました。