divを他のdivの前に移動するにはどうすればいいですか？

imageupload divの上のユーザーのクリックが、その後submit_buttonを関数が.ITはJavaScriptで書かれた関数である働くとき、ここに私のhtmldivを他のdivの前に移動するにはどうすればいいですか？

<div class="parent-canvas"> 
    <div class="text-canvas" contenteditable="true"> 
     my text 
    </div> 
<div class="image"> 
    <div class="image-canvas"> 
     <div class="imageupload" onclick="submit_button()"><img src="Image.jpeg"></div> 

    </div> 
</div> 
</div>

を参照してください。

ここで私が望むのは、自分のテキストが画像の前に現れるようにする必要があるということです。それはPhotoshopのレイヤコンセプトのようです。私は背景レイヤーを親キャンバスにする必要があります最初のレイヤーはイメージキャンバスであり、前面レイヤーはテキストキャンバスです。これを行う方法。現在、私のテキストは表示されず、image.jpegの下にあります。

また、私はテキストを編集可能にする必要があります。画像内のどこでも、submit_button関数の作業をクリックします。しかし、テキストの前に移動すると、中央部分にあるかもしれません。その部分では、テキストを編集できます。と残りの部分submit_button（）関数が動作する必要があります。

出典

2016-10-18 Anonymous

を使用した例でありますか？ http://www.w3schools.com/cssref/pr_pos_z-index.asp – Turo

こんにちは。ここで私はzインデックスの使い方を知らない。説明してください。 –

DEMO：

http://plnkr.co/edit/YmlDaDluwALneBjyQjQE?p=preview

HTML：

<div class="parent-canvas"> 
    <div class="text-canvas" contenteditable="true"> 
     my text 
    </div> 
    <div class="image-canvas"> 
     <div class="imageupload" onclick="submit_button()"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"></div> 

    </div> 
</div>

CSS：

.parent-canvas { 
    position: relative; 
    width: 500px; 
    height: 300px; 
} 

.text-canvas,.imageupload { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.text-canvas { 
    text-align: center; 
    color: #fff; 
    z-index:1; 
    top: 50%; 
    transform: translateY(-50%); 
    bottom: auto; 
} 

.imageupload { 
    display: block; 
    overflow: hidden; 
}

出典

2016-10-18 11:31:22

ありがとうございました。あなたのコードは動作しています。あなたは私のテキストを画像の中央に配置する方法を教えてください。。これを説明してください。私はオーバーフローする必要はありません。 .imageuploadクラスで。ありがとうございました。 –

更新された回答とデモを確認してください。画像のサイズが大きいため、オーバーフロー：隠しが使用されます。 –

ありがとうございます。 –

お試しください。

function submit_button() 
 
{ 
 
alert('Submit Button Click'); 
 
}

img { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: -1; 
 
}

<div class="parent-canvas"> 
 
    <div class="text-canvas" contenteditable="true"> 
 
     my text </div> 
 
    <div class="image-canvas"> 
 
     <div class="imageupload" onclick="submit_button()"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" width="100" height="140"></div> 
 

 
    </div> 
 
</div>

出典

2016-10-18 11:28:08

ありがとうございました。私はそれをテストします。 –

使用したCSSのz-indexが、ここにあなたがCSSでのzインデックスを探索しましたZインデックス

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Layer Example</title> 
<style> 
    body { 
     overflow: hidden; 
     margin: 50px; 
    } 

    .layer_one { 
     position: absolute; 
     height: 20vh; 
     width: 20vh; 
     background-color: #ffff00; 
     z-index: 1; 
    } 

    .layer_two { 
     position: absolute; 
     margin: 10px; 
     padding: 10px; 
     height: 20vh; 
     width: 20vh; 
     background-color: rgba(138, 43, 226, 0.5); 
     z-index: 2; 
    } 

    .layer_three { 
     position: absolute; 
     margin: 10px; 
     padding: 10px; 
     height: 20vh; 
     width: 20vh; 
     background-color: rgba(0, 128, 128, 0.5); 
     z-index: 3; 
    } 
</style> 
</head> 
<body> 
<div class="layer_one"> 
background 
<div class="layer_two"> 
    behind layer three 
    <div class="layer_three"> 
     i am layer three 
    </div> 
</div> 
</div> 
</body> 
</html>

出典

2016-10-18 11:39:51

ありがとうございます。投票した –

divを他のdivの前に移動するにはどうすればいいですか？

答えて

関連する問題