フレックスボックスレイアウトの絶対要素から固定要素へ

Question

position:absolute;からposition:fixed;への要素の移動方法は、親要素がflexboxの場合ですか？

私はさらに説明しましょう：私は非常に基本的なレイアウト100％flexboxに基づいています。レイアウトは、ちょうど左側のサイドバーとコンテンツ領域です。コンテンツエリアには、先頭から400pxで始まるヘッダーがあり、（ヒーローセクションをカバーするために）絶対的に配置されています。希望のUXは、画面の上部に触れた後、このヘッダーをスティッキーにします。今

Here is a pen for illustration.

、私はこれは問題ではない、プログラムで指定されたスクロール位置でfixedにabsoluteからヘッダを切り替える機構を有します。 fixed

問題がある、： 1.ヘッダが右にスクロールバーをカバー（本当の問題）ヘッダの 2.左側がleft:プロパティ（マイナーな問題を設定するために知らなければなりません：I私のサイドバーの幅が固定されているのでコピーすることができます）。

私はposition:stickyについて聞いたことがありますが、それはnot really well supported so farと信頼性がないようです。

もちろん、スクロールバーのサイズは各ナビゲータに依存しているのでわかりません。そうでなければ、right:17px;などのようにします。 ;）

EDIT

スクロールバーと重なるようにヘッダを強制的に「バグ」の原因は#contentにoverflow:autoセットです。 しかし、レイアウトがflexboxに基づいているので、基本的なflexboxを使用してサイドバーがスティッキーとして定義されているので、この方法の使用を避ける方法はわかりません。だから根本的な疑問は、フレックスボックス内の要素を貼る方法、フレックスボックスを使うことです。 position:fixedは明らかにフローを破るので互換性がありません...また、明らかなステップはflexboxを回避し、古典的な配置を使用してレイアウト全体を再設計することですが、これは目的外です。レイアウトは、古典的なCSSの配置を無視するネイティブ（フレックスボックスのみ使用）... See here。 （もちろん、反応ネイティブはスクロールを扱う別の方法を持っているため、Web環境の問題です）。

position:absoluteのみを使用していましたが、私のtopプロパティをプログラムで調整しました（反応を使用していましたが、現在のスクロール位置を知ることができる技術）。

擬似コードでは、希望：

//when scroll reaches 400px  
if getScrollTopPostion() > 400 

//recalculate top position of given element to equal current Scroll position. 
//This gives the effect that the element is sticky. In reality it is just live recalculated... 
//Quid of performances?? no idea 
then setTop(getScrollTopPostion()) 

//otherwise, let the element absolutely positioned at 400 
else 400 

は明らかに、これは最初の質問に答えていません。

「正式な」答えはposition:stickyですが、実際にはブラウザの95％（特にモバイルのもの）に広がるまでは、まだ適切な答えが見つかるはずです。

Answer 1

第1号を修正するには、次を試してください。 #main #content #header { 位置：固定; ... } プロパティを#contentから削除します。また、align-items:stretchを#sideBarに追加します。