CSS定位不移動圖像？

所以我正在做一個拖放瀏覽器'打扮'式的遊戲。然而，出於某種原因，我似乎無法定位我的圖像 - 無論是可拖動的圖像還是娃娃基地。我可以拖放可拖動的圖像，但我無法更改它們的初始位置。我已經改變了他們的位置類型，嘗試使用頂部/底部/左/右，邊距，甚至填充將圖像移動到我想要的位置，但他們絕對不會移動！CSS定位不移動圖像？

這裏的HTML/CSS我使用：

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<style> 
<!--Page Styling--> 
html, body{ 
    background-color:#5C5C5C; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#banner{ 
background: rgb(143,250,138); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(143,250,138,1) 0%, rgba(127,239,127,1) 10%, rgba(109,223,115,1) 25%, rgba(107,229,115,1) 37%, rgba(106,236,114,1) 50%, rgba(74,226,82,1) 51%, rgba(136,242,122,1) 83%, rgba(175,252,142,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,250,138,1)), color-stop(10%,rgba(127,239,127,1)), color-stop(25%,rgba(109,223,115,1)), color-stop(37%,rgba(107,229,115,1)), color-stop(50%,rgba(106,236,114,1)), color-stop(51%,rgba(74,226,82,1)), color-stop(83%,rgba(136,242,122,1)), color-stop(100%,rgba(175,252,142,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ffa8a', endColorstr='#affc8e',GradientType=0); /* IE6-9 */ 
font-size: 20px; 
font-family: 'Arial Black', sans-serif; 
width: 100%; 
margin-left: -10px; 
text-align: center; 
z-index: 99999; 
position: fixed; 
} 

#holder{ 
position: absolute; 
height: 800px; 
width: 900px; 
background-color: #838B8B; 
margin-left: -10px; 
margin-top: -300px; 
z-index: -1; 
} 
<!--Bodies--> 
#body1 { 
position: absolute; 
right: 0; 
height: auto; 
width: 200px; 
z-index: 1; 
} 
<!--Parts--> 
#breath{ 
position: relative; 
left: 10px; 
} 
    </style> 

<!--Draggable Scripts--> 
    <script> 
    $(function() { 
    $("#breath").draggable(); 
    }); 
    </script> 
<!--End Draggable Scripts--> 

</head> 
<body> 
<div id="banner">Homestuck Character Editor</div> 
<div id="body1"><img src="http://i.imgur.com/aO3GWBO.png"draggable="false"/></div> 
<div id="holder"></div> 
<div id="breath"> 
    <img src="http://i.imgur.com/iAmOFlH.png"/> 
</div> 

</body> 

</html>

來源

2013-12-09 SGR

他們應該在哪裏？ – agconti

這裏是你的代碼在小提琴中：http://jsfiddle.net/p9y9k/ – agconti

可拖動的圖像應該稍微偏離左側，不可拖動的圖像應該在右側。我在定位代碼中添加了，但他們不動。 – SGR

你右邊位於div，但圖像仍然在左邊。由於div元素是塊，他們填充他們的父母的100％。在這種情況下，父母是100％。您可以通過選擇它並移動圖像本身來獲取屏幕右側的圖像。我使用了以下內容：

#body1 img { 
    position:absolute; 
    right:0; 
}

The fiddle。

來源

2013-12-09 03:23:40

CSS定位不移動圖像？

回答

相關問題