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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

2回答

803閲覧

position:fixed;が親要素基準になりません。

ttt343

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2019/06/14 05:29

編集2022/01/12 10:55

サイドメニューの下にアイコン画像置きたいのですが、position:fixed;が親要素基準になりません。
よろしくお願いします。

html

1 2<body> 3<div class="side-menu" > 4<nav>~</nav> 5<div class="oya"> 6<div id="icon"><img></div> 7</div></div> 8 9</div> 10<div id="main"> 11</div> 12<div id="clear"></div> 13</body>

css

1body{height:3100px;} 2 3@media screen and (max-width:1080px) { 4 body{ height: 2860px;} 5} 6 7@media screen and (max-width:800px) { 8 body{ height: 2600px;} 9} 10 11.side-menu{bottom:-2px;margin-left:44px;z-index:2;position:fixed;} 12 13@media screen and (max-width:1080px) { 14 .side-menu{width:140px;} 15} 16 17@media screen and (max-width:800px) { 18 .side-menu{ width:110px;} 19} 20 21@media screen and (max-width:768px) { 22 .side-menu{ width:107px; } 23} 24 25 26.oya{margin:0 auto;width:1px;height:1px;} 27 28 #iconyo img{z-index: 9000;} 29 30#iconyo{bottom:-2px;margin-left:20px ;position:fixed;width: 114px;height: 171px;left: auto; z-index: 9000;padding:0;} 31 32@media screen and (max-width:1080px) { 33 #iconyo img{width:80%;height:80%; } 34} 35@media screen and (max-width:768px) { 36 #iconyo {margin-left:-16px ;} 37} 38
なんとか上記の方法で768px以下でスライドの時はside-menuと一緒に移動させることは出来たのですが、 この方法だとスライド時アイコン画像が一時的にside-menuからはみ出してしまいます。 上記と同じような見た目ではみ出すことがないような配置にする為に試したこと ① id="icon"に親になる<div></div>をつけて親<div>に-paddngをつける。
試したこと ② 途中までfixed一番下までスクロールしたら absoluteにjavascriptで切り替え css body{height:3100px;} @media screen and (max-width:1080px) { body{ height: 2860px;} } @media screen and (max-width:800px) { body{ height: 2600px;} } .side-menu{bottom:-2px;margin-left:44px;z-index:2;position:fixed;} @media screen and (max-width:1080px) { .side-menu{width:140px;} } @media screen and (max-width:800px) { .side-menu{ width:110px;} } @media screen and (max-width:768px) { .side-menu{ width:107px; } } .icon img{bottom:0px;margin-left:44px;z-index:2;position:fixed;} @media screen and (max-width:1080px) { .icon img{width:80%; height:80%; margin-left:2px;} } @media screen and (max-width:800px) { .icon img{ margin-left:-9px;} } @media screen and (max-width:768px) { .icon img{ position: absolute;bottom: 0;left: } } .absolute{ position: absolute; } .kotei{bottom:2px;z-index;3;}

javascript

1$(window).on('scroll', function(){ 2 3 if($(window).scrollBottom() > $('kotei').height()){ 4 $('iconyo').addClass('absolute'); 5 }else{ 6 $('iconyo').removeClass('absolute'); 7 } 8 }); 9 //ページを読み込んだらスクロールイベントを実行させる 10 $(window).trigger('scroll'); 11 12}); 13

html

1<body> 2<div class="side-menu" > 3<nav>~</nav> 4<div id="icon"><img></div> 5</div> 6<div class="kotei">.</div> 7</div> 8<div id="main"> 9</div> 10<div id="clear"></div> 11</body>

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

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

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

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

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

x_x

2019/06/14 05:48

文章を見直してみてください。
ttt343

2019/06/14 09:39

指摘ありがとうございます。
guest

回答2

0

不要な閉じタグがあるため、divが正しく認識されていないのではないでしょうか。
まずtabを使い、ネストが正しいかどうか視覚的に整理してみてください。

html

1<body> 2<div class="side-menu"> 3<nav>~</nav> 4<div id="icon"><img></div> 5</div> 6<div class="kotei">.</div> 7</div> 8<div id="main"> 9</div> 10<div id="clear"></div> 11</body>

tabでネストを整理

html

1<body> 2 <div class="side-menu"> 3 <nav> 4 ~ 5 </nav> 6 <div id="icon"> 7 <img> 8 </div> 9 </div> 10 11 <div class="kotei"> 12 . 13 </div> 14 </div>/*この閉じタグが不要です。この行を削除してください。*/ 15 16 <div id="main"></div> 17 <div id="clear"></div> 18</body> 19</body>

投稿2021/12/13 04:55

maru_mkp

総合スコア15

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

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

0

親要素にposition:relative;を指定してみるとうまくいくと思います。

投稿2019/06/15 16:16

gyarasu

総合スコア148

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

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

ttt343

2019/06/15 16:31

回答ありがとうございます。 最初に質問したpstion:fixedはちゃんと配置はされたのですが、思ったような見た目にはならなかったので、 試した事①、②のどちらかの話で大丈夫でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問