position をスマホでは表示しない方法【css】

Question

position: absolute;　
を、CSSとHTMLだけでを使ってスマホでは表示しない方法はありますか？

 /*---Sm---*/
 @media only screen and (max-width: 767px) {
 .pic { position: block;}
}

上記では出来ませんでした。

Comments

[m.ts10806]

「できなかった」ではわかりません。
そもそも提示のmediaクエリは効いているか確認されましたか？
文字色とか背景色とか見た目でわかる内容で確認してください。
あと、cssはhtmlにあてるものですので、実際のhtmlがないと誰も再現確認できませんし、他のcssの影響もあるのでやはり、「現象が再現する情報」は全て提示する必要があります。ブラウザの種類やバージョンも、です。
モバイルなら機種などもあったほうが尚良です。
もちろん同じ機種を持っている人がいるかどうかは不明ですがOSがわかるだけでも、情報としては意味があります

[m.ts10806]

あと「表示しない」だと分からないです。absoluteがどうなったらいいんでしょう。

Answer 1

適当に想像でコーディングするのではなく、ドキュメントを確認しましょう。

position に blockなどという設定はありません。

position - CSS: カスケーディングスタイルシート | MDN

上記を読めばpositionは位置を指定するもので、表示/非表示を設定するものではありません。
表示に関する設定は displayです。

display - CSS: カスケーディングスタイルシート | MDN

 /*---Sm---*/
 @media only screen and (max-width: 767px) {
 .pic { display: none;}
}