クロムにねじ込まれた要素の位置

Question

一度は、ffとする。しかし、この場合、クロムはそれを好きではありません。

x個の文字の後に表示されるフィールドが自動的に作成されています。 DBが動くように、実際にデモをフィドルに置くことはできません。 しかし、ここでCSS

.suggestionsBox { 
    z-index: 2; 
    position: absolute; 
    margin: 70px 0px 0px 146px; 
    width: 207px; 
    background-color: #ffffff; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border: 1px solid #cccccc;  
    color: #000; 
    box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
    -webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
    -moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
} 

.suggestionList { 
    margin: 0px; 
    padding: 0px; 
} 

.suggestionList li { 
    list-style: none; 
    margin: 3px 3px 3px 3px; 
    padding: 3px; 
    cursor: pointer; 
} 

.suggestionList li:hover { 
    background-color: #ffffcc; 
} 

とFFのscreenpic、すなわちクロム登場です。任意の提案、私は通常、CSSで良い血まみれです。しかし、これは私に困ってしまった。

ここで要求されたように、この要素のHTMLです：

<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div> 
         <div class="suggestionsBox" id="suggestions" style="display: none;"> 
          <div class="suggestionList" id="autoSuggestionsList"> 
           &nbsp; 
          </div> 
         </div> 

Answer 1

.suggestionsBoxの余白は何をしますか？絶対配置された要素として、私はそれが無視されると信じています。

問題は、絶対に配置された.suggestionsBox divに上/下/左/右の値を設定していないことが原因と思われます。これは、ブラウザにそれを置く場所を決定するためにそれを残す。

.fieldクラスに「position：relative;」が含まれていることを確認してください。その上に「トップ：20ピクセル」を追加しますと "右：0px;" .suggestionsBoxスタイルに変換します。正しく整列していない場合は、上下の値を調整してください。

Answer 2

それが最も可能性の高いJavaScriptの問題だようにこれが見えます。提案リストはプログラマチックに配置される可能性が最も高い（position: absoluteがあると思われるので）、そのコードを見てみよう。

JavaScriptの問題でない場合は、絶対要素の「位置の親」が異なる可能性があります。あなたのCSSは、提案ボックスが絶対的に配置されていることを示していますが、投稿されたコードからその位置のベースライン（最も近い位置にある祖先がどのように定義されているか）を確認することはできません。

絶対配置に役立つことがある1つのことは、マージントップではなくtopスタイルを使用して、絶対配置された要素を下に移動することです。

Answer 3

まず、ニックピック。

そうでなければ、（潜在的に）何かを壊すことがあり、常に最後の非接頭辞のバージョンを使用して、ベンダープレフィックスとCSS3を使用して：あなたの問題については

-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 

を：私はのためのCSSを見ることができません.field divとなりますが、位置決めコンテキストが設定されている（おそらくrelative）と思われます。それ以外の場合は、suggestionBoxのz-indexは機能せず、スクリーンショットで判断します。今、あなたが設定していないものが実際の位置です。 absoluteポジショニングコンテキストは、ボックスをその親の左上隅に配置する必要があります（明らかに、親が位置決めコンテキストも必要とする理由です）。親の最下部から開始する必要がある場合は、.suggestionBoxのプロパティにtop: 100%;を追加する必要があります。

私はここで間違っているかもしれない何かを実際に見ることはできません。

Answer 4

このようなものをデバッグするには、入力候補に関係なく、提案リストが固定され開いたままになるように、バックエンドコードを少し修正します。ページを読み込んでから、Chromeのデベロッパーウィンドウを開き、[要素]タブに移動し、[虫眼鏡]アイコンを使用して、配置した要素を確認します。スタイルパネルを使用して、どの属性が誤ったオフセットを引き起こしているかを発見します（要素またはその親の絶対位置と固定位置のようなものを試してみることを忘れないでください）。状況が間違っているかどうかを知ったら、他のブラウザでは「修正」が問題ないかどうかを確認してください。

Answer 5

@mingosのおかげと@russelluresti

私たちは、この修正されている：

CSS：

.suggestionsBox { 
z-index: 2; 
top: 59px; 
right: 524px; 
position: absolute; 
margin: 69px 0px 0px 146px; 
width: 207px; 
background-color: #ffffff; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border: 1px solid #cccccc; 
color: #000; 
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc; 

}

とフィールド：

.form .field { width: 50%; float: left; position:relative;} 

乾杯人、完璧です。私はSafariを持っていませんが、興味があった3で動作し、適切なルールをサポートする有効なコードのようです。多くのありがとう