3

position: absolute;将来の子を絶対に配置できるように、要素の1つが必要なhtmlセットアップがあります。子の配置はファイルで動作するようですがposition: absolute;、何らかの理由で、タイトルのすぐ下に表示されるはずの画像がタイトルの右側に表示されます。私はこれを熟考するのに数時間を費やしました。position: relative;as classを使用して div に追加しようとしましhot_spot_itemたが、実りはありませんでした。を削除すると、画像がタイトルのすぐ下に配置position: absolute;されますが、子の絶対位置が乱れます。.hot-spot-wrapper

どんな助けでも感謝します。

http://jsbin.com/ocetas/1/edit

編集

@jkinz詳細な返信をありがとう。タイトルとマップが一緒で、どちらも同じ降り場があることがわかった場合、あなたのソリューションは機能します。問題は、彼らがここで物事を行う方法のために、もう少し複雑です.

  • HTML は、ビジネス関係者がページの作成に使用する XML 構成に基づいて、サーバー側で構築されます。
  • この xml 構成は、タイトルとマップを 2 つの別個のエンティティとして扱います。
  • この xml 構成は、サーバー側でアイテムごとに解析され、その特定のアイテムの html を生成する freemarker テンプレートを通過します。
  • したがって、タイトルの html はマップの html とは別に生成されるため、私の人生は悲惨なものになっています。
  • これは、ビジネス作成者が xml 構成で実行できる多くのことの 1 つです。
  • したがって、これが彼らが配置した種類のxml定義であることを検出するのが難しい場合、タイトルとマップを一緒にラップして配置できるようにすることがわかります.
  • また、タイトルとマップの水平方向の配置を個別に制御できます。

PS 私は「デザイン生産分離症候群」の典型的なケースです。長い間、ソフトウェア業界ではこれは不可能だと思っていました。アーキテクトは、UI 開発者が 2 年間参加せずに Web ベースの製品を開発した経験がないショップでバックエンド全体を設計および実装しました。その後、UI を行うために私を連れてきました。ソフトウェアを開発するためのくだらない方法。とにかく、あなたの助けに感謝します。

4

1 に答える 1

4

位置が宣言されている限り、子は絶対に配置できます。

要素を配置すると、通常のドキュメント フローから完全に外れます (フローティングはそうではありません)。宣言された位置を持つ最も近い親 (または存在しない場合はウィンドウ) を探しているため、クリアは実際には何の意味もありません。

あなたの場合、 position:relative を持つ親要素が機能するはずです。これにより、親をクリアして、絶対に配置された子要素を持つことができます。

JSBin リンクを見た後に編集する

マップ上にマーカーを配置しようとしているようです。私はこれを少し違った方法で行いました。これが私のアプローチです: http://jsfiddle.net/sZq4d/

HTML

<div class="map-wrapper">
    <p>Place a marker on the map</p>
    <div class="map">
        <img src="http://placehold.it/400x400" />
        <div id="place1" class="marker" title="A nice pop-over tooltip">
            P1
        </div>
        <div id="place2" class="marker" title="This is place 2">
            P2
        </div>
    </div>
</div>

CSS

.map-wrapper {
    border: 1px solid #aaa;
    padding: 10px;
    margin: 0 auto;
    width: 400px;
}
.map-wrapper > p {
    text-align: center;
}
.map {
    /* background can be removed, height and width should match that of your map  image*/
    background-color:#eee;
    height: 400px;
    position: relative;
    width: 400px;
}
.marker {
    /* All common marker styles go here */
    background: blue;
    color: white;
    height: 20px;
    width: 20px;
    position: absolute;
}
/* I'm using pixels here, if want a more responsive style, use percentages, that way   when the map scales, the markers stay in the appropriate place*/
#place1 {
    left: 20px;
    top: 100px;
} 
#place2 {
    bottom: 40px;
    right: 150px;
}
于 2013-06-28T21:33:58.800 に答える