Wie fix ein Bild der position relativ zu einem Bild mit unterschiedlichen Bildschirmgrößen

Schreibe ich eine Webseite/iPad-app (mit PhoneGap), wo ich 1024x768 Bilder auf einer Folie zeigen. Ich würde gerne Stellung ein anderes Bild, z.B. das home-Symbol, oben auf die 1024x768-Bilder, an genau der gleichen position, unabhängig von der Bildschirm-Größe (z.B. hohe/niedrige Auflösung PC-Bildschirm oder 1024x768 tablet-display). Ich habe versucht, die absolute, aber die position ändert sich in den verschiedenen displays, und es ist nicht die gleiche position wie ich ursprünglich in CS 5.

sind Sie mit px zu positionieren?
ja: #bx-home { position:absolute; top:700px; rechts:980px; z-index:999; width: 30px; height: 30px; text-indent: -999999px; background: url ("zu Hause.png) no-repeat 0 -30px; }

InformationsquelleAutor David Zhao | 2011-09-19

  1. 4

    Ähnlich wie die anderen Antworten, aber wenn Sie nicht möchten, definieren Sie die Breite und Höhe, die Sie verwenden können float:

    http://jsfiddle.net/RprTY/

    <div>
    <img src="http://placekitten.com/300/300">    
    <img src="http://placekitten.com/30/30" id="smallone">
</div>

    CSS: 

    div{
    float: left;
    position: relative;
}

img{
     vertical-align: bottom;   
}

#smallone{
    top: 0;
    left:0;
    position:absolute;   
}

    Solange der übergeordnete container ist, legen Sie entweder position: relative oder position: absolute, dann werden die absolut positionierten Bild positioniert werden soll in Bezug auf die Obere linke Ecke des übergeordneten Elements. Das sollte völlig unabhängig von der Bildschirmauflösung.

    InformationsquelleAutor James Montagne

  2. 1

    Setzen Sie Ihren 1024x768 Bild in ein div mit der gleichen Größe. Ihre home-icon in das div auch. Geben Sie dem div die position relative, und das home-Symbol, position absolute und es wird absolut positioniert, ist es innen übergeordneten div.

    InformationsquelleAutor katy lavallee

  3. 1

    Habe ich versucht, den hier vorgeschlagenen Lösung, aber es funktionierte nicht. Ich habe im Grunde das gleiche problem: zwei Bilder in einem slider, einer von Ihnen wird absolute positioniert, mit Prozentangaben (also, wenn ich die Breite des Viewports, es scrollt seitwärts). Das andere Bild bewegen soll zusammen mit der ersten eine statisch positioniert in Bezug auf die letzteren.

    Der Sache ist, in meinem Fall, die Bilder sind nicht Kinder der gleichen Eltern-div. Ich habe ein Fiddle-Beispiel der code, den ich zurzeit arbeite.

    http://jsfiddle.net/36QPG/1/

    <div class="image">
    <img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
    <div class="image">
        <img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
    </div>
</div>

    Es ist erwähnenswert, dass ich nicht ändern kann, den HTML-code einrichten.

    Ich habe gekämpft, mit diesem problem für eine Weile jetzt, aber ich habe nicht in der Lage, um es herauszufinden. Ich hoffe ich habe mich klar genug.

    Vielen Dank im Voraus.

    Endlich habe ich es herausgefunden. Nur implementiert, James Montagne Lösung für das problem. Zog ich den div der das erste Bild in der "slide" - div. Sofern die divs mit den Bildern wurden bereits absolut positioniert, alles, was ich zu tun hatte, war die Schaffung einer übergeordneten div die verkörpert sowohl Bilder und Einstellung der position relativ zu es. Arbeitete 100% für meine Zwecke.

    InformationsquelleAutor Le_Bousier

  4. 0

    html:

    <div id="bottom">
    <div id="top"></div>
</div>

    css:

    #bottom{ 
    background: url(*bottom-image-url*); 
    position: relative; 
    width: *??*; 
    height: *??*;}
#top{ 
    background: url(*top-image-url*); 
    position: absolute; 
    width: *??*; 
    height: *??*; 
    left: *??*; 
    right: *??*;}

    InformationsquelleAutor greggreg

Schreibe einen Kommentar