position relativeの位置について

初心者な質問でごめんなさいm（＝＝）m

リキッドレイアウトに初挑戦中で、
画像の下に、jqueryで横スライドショーを入れる予定です。

上に入れる画像とdivの高さをautoや100％にした場合、

下にスライダーを入れているのですが、
最初にパソコンで表示される時に
画像の下にスライダーがくるように
調節するとtopが670pxですが、
ブラウザーサイズを変更すると、
上の画像が縮んでも、スライダーは同じ位置に残るので、
空間が出来てしまいます。
このスライダーの位置を、上の画像とdivに対して、
縮んだ時、ついてくるようにするにはどのように
書いたらよいでしょうか（；；）？
よろしくお願いしますm（＝＝）m





<div id="contener">
<article>
<div class="clearfix" id="stage">
　　　<img src="img/0.jpg" alt="1" />
</div>
</article>
<div class="clear"></div>
<article>
<div id="slide">
<ul id="slideIn">
<li><a href="1.html"><img src="img/1.jpg" alt="1" /></a>
<p>1</p></li>
<li><a href="2.html"><img src="img/2.jpg" alt="2" /></a>
<p>2</p></li>
<li><a href="3.html"><img src="img/3.jpg" alt="3" /></a>
　　　　<p>3</p></li>
</ul>
</div>
</article>
</div>



#slide {
width: 100%;
height: 120px;
overflow: hidden;
position: relative;
background-color: #FFF;
max-width: 1000px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
top: 670px;
}
#slideIn li p {
margin-top: 2px;
}
#slideIn {
position:absolute;/*スライドが絶対配置で移動するので、positionはabsoluteである必要があります*/
left:0;/*必要です*/
top:0;/*必要です*/
}
#slide li {
float: left;
width: 187px;
height: 120px;
margin-right: 5px;
background-color: #FFC;
font-size: 10px;
text-align: center;
}

質問者からの補足コメント

• ごめんなさい（；；）せっかくのアドバイス試してみましたが、できませんでした；
  私の説明不足ですね；
  入れるのはimg単体ではなくて、またまたjqueryで切り替わるスライドショーです；
  clearfixのcssにzoom1とありますが、このせいでしょうか？
  jqueryをサンプルから頂いて切り貼りしているので、
  使ったことのないCSSの設定がいろいろあって（＾＾；
  
  
  <div class="clearfix" id="stage">
  <img src="img/1.jpg" id="img1">
  <img src="img/2.jpg" id="img2">
  <img src="img/3.jpg" id="img3">
  <div class="clear"></div>
  </div>

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/02/05 15:55

• ヘッダーに入ってるスクリプト
  <script src="respond.min.js"></script>
  <script "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
  <script type="text/javascript">
  var flg=1; //flgに初期値1をセット

    補足日時：2015/02/05 15:57

• $(function(){
  
  setInterval(function() {
  switch(flg){
  case 1:　//flgが1の場合
  //1枚目から2枚目に切り替え
  $("#img1").fadeOut(1500);
  $("#img2").fadeIn(700);
  break;
  
  case 2:〜

    補足日時：2015/02/05 15:58

• ステージ回りのCSS
  
  #stage {
  margin: 0px;
  height: auto;
  width: 100%;
  top: 0px;
  vertical-align: top;
  float: left;
  }
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix {
  zoom: 1;
  }

    補足日時：2015/02/05 15:58

• 可変グリッドのcssについていたこれとかも、何か影響あるでしょうか？？？
  
  HTML5 表示定義
  ===========
  
  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }

    補足日時：2015/02/05 17:26

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/02/05 16:21

＞/*スライドが絶対配置で移動するので、positionはabsoluteである必要があります*/

それはおかしいです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿
absolute
　ボックスの位置（と場合によっては大きさ）は'top'、'right'、'bottom'、'left'プロパティで指定される。これらのプロパティはボックスの包含ブロックとの関係を示すオフセットを指定する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual formatting model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )］より

　その親になる抱合ブロックがstatic以外でしたら、その位置を基準になります。
ですから、rerativeでも（floatでも）良いです。

それよりもっと大事なこと・・リンク先を示しておくので・・
HTML5のようですが、
＞このスライダーの位置を、上の画像とdivに対して、
これは、基本的な間違いです。市かもとても重要な・・
なぜ、HTML5を作らなければならなかったか？？？
それは、HTL4.01では、構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )が叫ばれながら、HTML4.01では文書構造を示しきれないために、DIVやSPAN要素をid属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )ことしかできなかった。
★HTML4.01でも　contener、clearfix、stage、clear、slide、slideInというようなID,class名はおかしい。文書構造ではなくプレゼンテーションのようですね。
★HTML5は、文書構造を明確に示すように新しい要素が追加されました。
　　http://standards.mitsue.co.jp/resources/w3c/TR/h …
　　　⇒【問題2】文書内に埋め込まれた「意味」が不明確( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )ページ中ほど

★HTML5では、DIVは原則として使いません。使うべきではないとされています
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )］より
　(著者は他に適切な要素がないときの最後の最後の手段としてDIV要素を使うよう強く推奨する。）

　せっかくHTML5で始められるのでしたら、以上はとても大事なことなのですよ。
その上でTMLを書くと

<body>
　<article><!-- 内部にheader,section,footerをもちうるそれだけで完結する記事を示す -->
　　<header>
　　　<h1><img src="img/0.jpg" alt="なんたらのページ" >
　　　<nav><!-- ナビゲーションを示す -->
　　　　<ul>
　　　　　<li>
　　　　　　<a href="1.html"><img src="img/1.jpg" alt="1" ></a>
　　　　　　<p>1</p>
　　　　　</li>
　　　　　<li>
　　　　　　<a href="2.html"><img src="img/2.jpg" alt="2" /></a>
　　　　　　<p>2</p>
　　　　　</li>
　　　　　<li>
　　　　　　<a href="3.html"><img src="img/3.jpg" alt="3" /></a>
　　　　　　<p>3</p>
　　　　　</li>
　　　　</ul>
　　　</nav>
　　</header>
　　<section>
　　　<!-- このarticleの本文が入る -->
　　</section>
　　<footer>
　　</footer>
　</article>
</body>
HTMLはこれで良いです。articleは一つしかないのでなくても良いです。さらにシンプルになる。

html,body{
margin:0;padding:0;
background-color:white;
}
h1,h2,h3,p,li{
margin:0
line-height:1.6em;
}
header{/* headerは・・*/
width:100%;
max-width:1000px;min-width:630px;
margin:0 auto;
background-color: white;
}
header h1 img{/* header内のh1内の画像は　*/
width:100%;
height:auto;
}
header nav{
position:relative;
}
header nav ul {
text-align:center;
line-height:20px;
list-style:none;
margin:0;
}
header nav ul li{
display:inline-block;
width: 187px;
height: 120px;
background-color: fuchsia;
font-size: 10px;
}

このように、スタイルを指定する要素は子孫セレクタを使って指定します。idやclassをつかって指定すると、あとで分からなくなりますよ。また示された記述方法はCSS1の時代の古いもので、CSS2以降は必ず基点セレクタから書き始めます。
※HTML5の閉じタグは/>である必要はありません。

　HTML5だと、文書構造しか書かないのでメンテナンスもとても楽になります。デザインは好きに変更できるし、mediaqueryをつかって端末ごとにデザインを変えるのも楽になります。

この回答へのお礼

ORUKA1951さん

ご丁寧にありがとうございますm（＝＝）m

html5とDWの可変グリッドレイアウト、メディアクエリーも初めて使用しているので、
書いた覚えのない？cssがたくさんあって、大混乱中です；
ではデザインするからといって、divにいれる必要がないということですね！
スライドは試したところrerativeでもできました！
でも、やはり上の画像が縮んだ時に、位置が同じままで空間が空いています（＾＾；
何かが干渉してるんですねぇ。。。

お礼日時：2015/02/05 17:23

No.1 回答者： nana_coco 回答日時： 2015/02/05 15:27

こんにちは。

最初の画像を相対位置に指定すれば
下のスライドもそれに付いて来るのではないでしょうか？

#stage {
position: relative;
}

間違っていたらごめんなさい。

この回答へのお礼

nana_cocoさん（＾＾）

ありがとうございました♪

補足とお礼を良く解ってなくて、お礼できてませんでした（＾＾；

お礼日時：2015/02/10 10:28