Page上にDIVタグを表示するためのCSS -- javascript フィールド と jquery フィールド と html フィールド と css フィールド 関連 問題

css for displaying div tag over a page












0
vote

問題

日本語

アンカータグをクリックしながらカレンダーを表示し、versaの逆数を表示します.i divのカレンダーコードを書き込みます。これで、このDIVをスライドさせずにページの上にカレンダーを表示します。 今すぐ

として表示されています

画像の説明を入力しますここで

しかし私は次の画像として表示したい

画像の説明を入力します。

 <コード> <a class="aastext">Payroll Calender</a>  <div id='cal' class='cal'></div>  <table>     <!-- table code --> </table>   
 <コード> .cal, .pass1{     display: none;     width : 50px;     height: 50px;     background-color: blue; }   
 <コード> $(document).ready(function(){     $(".aastext").click(function(){         $(".cal").slideToggle("slow");     }); });   
英語

I want to display the calendar while clicking anchor tag and vice versa.I write the calendar code in div. Now I want to display the calendar over the page without sliding the this div. Now it is display as

enter image description here

But I want to display as next image

enter image description here

<a class="aastext">Payroll Calender</a>  <div id='cal' class='cal'></div>  <table>     <!-- table code --> </table> 
.cal, .pass1{     display: none;     width : 50px;     height: 50px;     background-color: blue; } 
$(document).ready(function(){     $(".aastext").click(function(){         $(".cal").slideToggle("slow");     }); }); 
</div
           
 
 

回答リスト

1
 
vote
vote
ベストアンサー
 

position: absolute を与えて、あなたは文書フローからあなたのカレンダーを取る必要があります。このように、他の兄弟要素の位置に影響を与えません。

 <コード> $(document).ready(function()  {      $(".aastext").click(function()      {          $(".cal").slideToggle("slow");      });  });  
 <コード> .cal  {      font-size: 10px;      display:none;      width :50px;      height:50px;      background-color:blue;      position: absolute;  }  
 <コード> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <a class="aastext">Payroll Calender</a>   <div id='cal' class='cal'>calendar</div>   <table>      <tr>          <td>table</td>      </tr>  </table>  
 

You need to take your calendar out of document flow by giving it position: absolute. This way it won't affect the position of other sibling elements.

$(document).ready(function()  {      $(".aastext").click(function()      {          $(".cal").slideToggle("slow");      });  });
.cal  {      font-size: 10px;      display:none;      width :50px;      height:50px;      background-color:blue;      position: absolute;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <a class="aastext">Payroll Calender</a>   <div id='cal' class='cal'>calendar</div>   <table>      <tr>          <td>table</td>      </tr>  </table>
</div
 
 
1
 
vote

<コード> position: absolute を<コード> .cal

に追加する
 

Add a position: absolute to your .cal

</div
 
 
1
 
vote
<事前> <コード> First make your calendar position absolute: .cal, .pass1{ display: none; width : 50px; height: 50px; background-color: blue; position : absolute; z-index:999 }

アンカーの位置を取得し、それに応じてカレンダーの位置を設定します。

<事前> <コード> $(document).ready(function(){ $(".aastext").click(function(){ var anchorOffset=$(this).offset(); var anchorHt=$(this).height(); $(".cal").css("top",(anchorOffset.top+anchorHt)+"px"); $(".cal").css("left",anchorOffset.left+"px"); $(".cal").slideToggle("slow"); }); });
 
First make your calendar position absolute:  .cal, .pass1{     display: none;     width : 50px;     height: 50px;     background-color: blue;     position : absolute;     z-index:999 } 

Now get the position of the anchor and accordingly set the position of calendar:

$(document).ready(function(){     $(".aastext").click(function(){         var anchorOffset=$(this).offset();         var anchorHt=$(this).height();         $(".cal").css("top",(anchorOffset.top+anchorHt)+"px");         $(".cal").css("left",anchorOffset.left+"px");         $(".cal").slideToggle("slow");     }); }); 
</div
 
 

関連する質問

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有