web-dev-qa-db-ja.com

相対的な親div内のdivを修正

現在、レスポンシブWebサイトを構築していますが、メニューを修正する必要があるため、サイトの残りがスクロールしてもスクロールしません。問題は、それが流動的なレイアウトであり、「固定配置」メニュー項目を、ブラウザウィンドウではなく親要素を基準にして固定することです。とにかくこれを行うことができますか？

fixedcss
25
Gavin Wood

この質問はGoogleで最初に出されましたが、古い質問なので、私が見つけた有効な答えを投稿しています。

これには、固定divを含む3つのdivが必要です。

[〜＃〜] html [〜＃〜]

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

[〜＃〜] css [〜＃〜]

.wrapper { position:relative; width:1280px; }
    .parent { position:absolute; }
        .child { position:fixed; width:960px; }
15
Leo

ギャビン、

あなたが抱えている問題は、ポジショニングの誤解です。親に対して「固定」したい場合は、#fixed することが position:absoluteは、親に対する相対的な位置を更新します。

この質問 は、位置決めタイプとそれらを効果的に使用する方法を完全に説明しています。

要約すると、CSSは

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
14
Fuzzical Logic

JavaScriptを使用せず、CSS変換を壊さない簡単な解決策は、スクロール要素と同じサイズで、スクロール要素と同じサイズの非スクロール要素をその上に配置することです。

基本的なHTML構造は

[〜＃〜] css [〜＃〜]

<style>
    .parent-to-position-by {
        position: relative;
        top: 40px; /* just to show it's relative positioned */
    }
    .scrolling-contents {
        display: inline-block;
        width: 100%;
        height: 200px;
        line-height: 20px;
        white-space: nowrap;
        background-color: #CCC;
        overflow: scroll;
    }
    .fixed-elements {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .fixed {
        position: absolute; /* effectively fixed */
        top: 20px;
        left: 20px;
        background-color: #F00;
        width: 200px;
        height: 20px;
    }
</style>

[〜＃〜] html [〜＃〜]

<div class="parent-to-position-by">
    <div class="fixed-elements">
        <div class="fixed">
            I am &quot;fixed positioned&quot;
        </div>
    </div>
    <div class="scrolling-contents">
        Lots of contents which may be scrolled.
    </div>
</div>
  • parent-to-position-byは、相対的なdivになります。
  • scrolling-contentsはこのdivのサイズにまたがり、その主な内容を含みます
  • fixed-elementsは、絶対位置にあるdivであり、scrolling-contentsdiv。
  • divクラスにfixedを絶対配置することにより、親divに対して固定配置されている場合と同じ効果が得られます。 （またはスクロールするコンテンツは、そのスペース全体にまたがるので）

実際の例を使用したjsフィドルです

7
KernelDeimos

これは、固定の<div>位置ではなくマージンを使用：

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

そして、このHTML：

<div id="wrap">
   <div id="fixed"></div>
</div>

これで遊んでください jsfiddle 。

4
JCOC611

できる簡単なことは、固定DIVをページの残りの部分に対して％値で配置することです。

これを確認してください jsfiddle here ここで、固定DIVはサイドバーです。

div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}

そして、上記のレイアウトを説明する以下の簡単な写真：

example layout

2
afable

これは、メニュー/ヘッダーの高さに依存しない、より一般的なソリューションです。完全にレスポンシブなPure CSSソリューションは、IE8 +、Firefox、Chrome、Safari、オペラで最適に動作します。メニュー/ヘッダーに影響を与えずにコンテンツのスクロールをサポートします。

それでテストする Working Fiddle

Html：

<div class="Container">
    <div class="First">
        <p>The First div height is not fixed</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
    </div>
    <div class="Second">
        <div class="Wrapper">
            <div class="Centered">
                <p>The Second div should always span the available Container space.</p>
                <p>This content is vertically Centered.</p>
            </div>
        </div>
    </div>
</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.First
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}

.Second
{
    position: relative;
    z-index: 1;
    /*for demonstration only*/
    background-color: #6ea364;
}

    .Second:after
    {
        content: '';
        clear: both;
        display: block;
    }

/*This part his relevant only for Vertically centering*/
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .Wrapper:before
    {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

.Centered
{
    display: inline-block;
    vertical-align: middle;
}
1
avrahamcool

絶対配置を使用してラッパーを修正できます。そして、内側のdivに固定位置を与えます。

.wrapper{
 position:absolute;
 left:10%;// or some Valve in px
 top:10%; // or some Valve in px
 }

そしてその中のdiv

.wrapper .fixed-element{ 
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}

これを試してみてください

1
Mandar Kawtakwar

親要素でposition：stickyを試してください。

1
Lohit Bisen

サンプルソリューション。これが必要なものかどうかを確認してください。

<div class="container">
   <div class="relative">      
      <div class="absolute"></div>      
      <div class="content">
        <p>
          Content here
        </p>
      </div>
    </div>
 </div>

CSSの場合

.relative { 
  position: relative;
}

.absolute {
  position: absolute;
  top: 15px;
  left: 25px;   
}

Codepenでご覧ください https://codepen.io/FelySpring/pen/jXENXY

0
Fely Spring