株式会社イメージ・マジックの技術ブログ、先週の担当のsoenoです。
正月付近の投稿ということでそれっぽい何かを考えていたのですがもう２月だそうです。
流石に正月気分でもないので当初の予定はやめ、今回は行方不明の要素の捜索について書きます。

HTML上で消えた要素を探す。

html上で色々要素を置いていきふと気が付くと、html上は存在するあの要素がない！
そんなときのよくやる手口の紹介です。普通にやっている人もいるかと思いますが…

方法

開発者ツールなり、cssへのクラスの追加なりで以下の指定を追加。

.search{
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
    border: solid 5px red;
    background: blue;
    display: block;
　　z-index: 9999999999;
　　opacity: 1;
　　color: green;
}

まず上の指定を捜索対象の要素に指定を足します。
クラスごと貼り付けるなり、ディベロッパーツールで追加するなりしてください。
この時打ち消されて効いていない箇所があった場合は衝突箇所を確認します。

次に表示が確認出来たら消えた原因を調べます。
（そのまま指定を足したままにするわけにはいきませんので）
付けた指定を一個づつ落とすなどし、怪しいところを絞り込みます。

最後に絞り込んだ箇所を問題のない指定に変えて終了です。
（疑似要素の場合はcontentsへの指定を追加するなど逐次書き換え。）

結論

今回この記事を書こうと思ったのは修正中のページの中で行方不明要素が出たからでした。
原因はdivの閉じタグが編集中に消えhtmlが崩れていたことでした。
まずhtmlをきれいに書き、行方不明の要素を出さないのが一番ということでしょうか。