質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1233閲覧

CSSの position: sticky; が効きません

Masa-Y

総合スコア30

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/19 02:41

Wordpressでブログのトップページを作成しております。
flexboxの2カラムレイアウトで、左側のメインボックスだけ画面上部にきたら固定して、
右側のサイドバーだけを、フッターまでスクロールさせるようにしたいのですが、
左のボックスのposition: sticky; が効かず、画面に固定されません。
親要素がoverflow: hidden だと効かなくなるそうなので確認しましたが、
それは該当しないようです。念のためにoverflow: visibleを指定しています。
ブラウザはchromeで、時々safariとfirefoxでも確認しながら作業しているんですが、
原因がわかりません。
デベロッパーツールで確認したところ、cssの記載は反映されております。
考えられる原因がほかにもありますでしょうか。
ご存知の方がいらっしゃいましたらどうかご教示ください。
お願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

1 <div class="lists"> 2 3 4 <!--左枠(新着順) --> 5 <div class="leftwrapper_900breakpoint" id="fixedbox"> 6 7 <div class="separator"> 8 <p class="hajichi"> 9 <img class="random_hajichies" alt="image" /> 10 </p> 11 </div> 12 13 <!-- barba.js 非同期画面遷移 --> 14 <div id="barba-wrapper"> 15 <div class="barba-container"> 16 17 18 <!--新着記事 --> 19 <section> 20 <ul class="show" id="latest_ul"> 21 22 <li class=""> 23 <p class="category"><?php 24 $category = get_the_category(); 25 if ( $category[0] ) { 26 echo '<a class="no-barba" href="' . get_category_link( $category[0]->term_id ) . '">' . $category[0]->cat_name . '</a>'; 27 } 28 ?> 29 </p> 30 <a href="<?php the_permalink(); ?>" class="article_hover_area no-barba 31 <?php 32 $days = 3; //Newを表示させたい期間の日数 33 $today = date_i18n('U'); 34 $entry = get_the_time('U'); 35 $kiji = date('U',($today - $entry)) / 86400 ; 36 if( $days > $kiji ){ 37 echo 'article_new'; 38 } 39 ?>" target="_blank"> 40 41 <?php if(has_post_thumbnail()) : ?> 42 <?php the_post_thumbnail(); ?> 43 <?php else: ?> 44 <img src="<?php echo get_template_directory_uri(); ?>/images/thumbnail.jpg"> 45 <?php endif; ?> 46 <div class="right_text_wrapper"> 47 <p class="date font_12px"><?php the_date(); ?></p> 48 <h1><?php the_title(); ?></h1> 49 <!-- <p><?php the_excerpt(); ?></p> --> 50 </div> 51 <div class="list_arrow"> 52 <i class="fas fa-angle-right fa-2x"></i> 53 </div> 54 </a> 55 56 </li> 57 </ul> 58 </div> 59 60 <!-- ページング機能 --> 61 <div class="tab1_paging_function"> 62 <?php if (function_exists("pagination")) { 63 pagination($additional_loop->max_num_pages); 64 } ?> 65 </div> 66 67 </section> 68 <!--新着記事END --> 69 70 </div> 71 </div> 72 <!-- barba.js 非同期画面遷移END --> 73 74 </div> 75 <!--左枠END --> 76 77 78 79 80 81 82 83 84 <!--右枠 --> 85     <div class="rightwrapper_900breakpoint"> 86 87 88 <!--人気記事 --> 89 <section> 90 <ul id="popular_ul"> 91 <h2 class="ranking_title">人気記事ランキングTOP5</h2> 92 93 94 <!--人気記事ループ --> 95 <?php 96 $args = array( 97 'post_type' => 'post', 98 'meta_key' => 'post_views_count', 99 'orderby' => 'meta_value_num', 100 'order'=>'DESC', 101 'posts_per_page' => 5, 102 ); 103 104 $the_query = new WP_Query( $args ); 105 if($the_query->have_posts()): 106 $count=1; // ループの前に最初の数字を代入 107 $cat = get_the_category(); // カテゴリ名を代入 108 while($the_query->have_posts()): $the_query->the_post(); ?> 109 <?php echo ' 110 <li> 111 <p class="category">'; ?> 112 <?php 113 $category = get_the_category(); 114 if ( $category[0] ) { 115 echo '<a class="no-barba" href="' . get_category_link( $category[0]->term_id ) . '">' . $category[0]->cat_name . '</a>'; 116 } 117 ?> 118 <?php echo '</p> 119 <a href="'.get_permalink().'" class="article_hover_area jet" target="_blank"> 120 <div class="popular_ranking_number"> 121 <p>'; ?> 122 <?php echo $count; ?> 123 <?php echo '</p> 124 </div>'; ?> 125 <?php the_post_thumbnail( 'thumbnail' ); ?> 126 <?php echo '<div class="right_text_wrapper"> 127 <p class="date font_12px">2019.1.15</p> 128 <h1>'.get_the_title().'</h1> 129 130 </div> 131 <div class="list_arrow"> 132 <i class="fas fa-angle-right fa-2x"></i> 133 </div> 134 </a> 135 </li>'; ?> 136 137 <?php $count++; 138 endwhile; 139 endif; 140 wp_reset_postdata(); 141 ?> 142 <!--人気記事ループEND --> 143 </ul> 144 145 </section> 146 <!--人気記事END --> 147 148 <div id="leftwrapper_under_ad"> 149 <a href="" class="jet"> 150 <img src="<?php echo get_template_directory_uri(); ?>/images/ado.png" alt="image" /> 151 </a> 152 </div> 153 154 <!--前へ次へボタン --> 155 <!-- <div class="prev_next_button"> 156 <ul id="tab_prev_next"> 157 <li class="active jet"> 158 <?php previous_posts_link(); ?> 159 </li> 160 <li> 161 <?php next_posts_link(); ?> 162 </li> 163 </ul> 164 </div> --> 165 <!--前へ次へボタンEND --> 166 167 168 169 <!--検索バーエリア --> 170 <div class="before_footer_area"> 171 <section class="form_wrapper"> 172 <h2> キーワードを入力 <i class="fas fa-comment"></i></h2> 173 <!-- <form id="form" action="自分のサイトURL" autocomplete="off"> 174 <input id="sbox" id="s" name="s" type="text" placeholder=" search" /> 175 <button id="sbtn" type="submit"> 176 <img src="<?php echo get_template_directory_uri(); ?>/images/search.png" width="40px" height="40px" alt="送信"/> 177 </button> 178 </form> --> 179 <?php get_search_form(); ?> 180 </section> 181 </div> 182 <!--検索バーエリアEND --> 183 184 185 186 <!-- タグ一覧エリア --> 187 <section class="tags_section"> 188 189 <?php 190 $args = array( 191 // タグ名順で指定 192 'orderby' => 'name', 193 // 昇順で指定 194 'order' => 'ASC' 195 ); 196 $posttags = get_tags( $args ); 197 198 shuffle( $posttags ); ?> 199 200 <?php 201 if ( $posttags ){ 202 echo ' <div> '; 203 foreach( $posttags as $tag ) { 204 echo '<a href="'.get_tag_link( $tag->term_id ).'" class="tag no-barba"> 205 <p class="tag_hole"></p><p class="square"></p><span>' .$tag->name. '</span></a>'; 206 } 207 echo ' </div> '; 208 } 209 ?> 210 211 </section> 212 <!-- タグ一覧END --> 213 214 215 <section class="writers_section"> 216 <div> 217 <h2>書いている人</h2> 218 <ul class="writers_flexbox"> 219 <li> 220 221 </li> 222 </ul> 223 </div> 224 </section> 225 226 </div> 227 <!--右枠END --> 228 229 </div> 230 231

css

1 .lists { 2 display: flex; 3 width: 100%; 4 max-width: 1200px; 5 margin: 32px auto; 6 } 7 8#fixedbox { 9 position: -webkit-sticky; /* Safari */ 10 position: sticky; 11 top: 0; 12 } 13 .leftwrapper_900breakpoint { 14 width: calc(100% - 320px); 15 box-sizing: border-box; 16 } 17 .rightwrapper_900breakpoint { 18 margin-right: 16px; 19 width: 320px; 20 box-sizing: border-box; 21 }

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

heightが未設定だったので、設定したところ、解決しました!

投稿2019/03/19 03:20

Masa-Y

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問