Проблема с укладкой слоев

Так что это может быть очень простая проблема, но на данный момент у меня есть блок разума. Я пытаюсь интегрировать этот код с моим сайтом, но из-за того, что изображение является фоновым слоем, я не могу его отображать над другими элементами на странице.Проблема с укладкой слоев

Так есть способ закодировать фоновое изображение внутри HTML вместо CSS, чтобы ему можно было присвоить свойство z-index, чтобы оно складывалось поверх других элементов?

код выглядит следующим образом ниже в его простейшей форме

(слева что-то, должно работать).

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <link href="home%20css.css" rel="stylesheet" type="text/css"/> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> 
     <script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script> 
     <script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $(".button0").flex(); 
      }); 
     </script> 
     <style type="text/css"> 
      .button0 { 
       position:relative; 
       width:850px; 
       min-height:300px; 
      } 
      .button0 a { 
       width:100px; 
       height:100px; 
       position:absolute; 
       background-repeat:no-repeat; 
       background-position:center; 
      } 
      [bb=a] {background-image: url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg); 
        position: absolute; 
        z-index: 100; 
      } 
      /* [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;} 
       [bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);} 
       [bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);} 
       [bg=e] {background-image:url(http://farm8.staticflickr.com/7003/69_3375be3073_z.jpg);background-size:auto 280px;} 
       [bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;} 
       [bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;} 
       [bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);} 
       [bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;} 
       [bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;} 
       [bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;} */ 
     </style> 
    <body> 
     <div class="button0"> 
      <a bb="a" style="left:0px;top:0px;width:10%;height:140px;" width="145%" height="140"></a> 
      <!--<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a> 
       <a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a> 
       <a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a> 
       <a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a> 
       <a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a> 
       <a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a> 
       <a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a> 
       <a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a> 
       <a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a> 
       <a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a> --> 
     </div> 
    </body>

источник

2014-01-13 CameoCream

Во-первых, установить фон, используя фон тела тег:

<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd>

Затем используйте скрипт для установки Z-индекс:

<script> 
function changeStackOrder() 
{ 
document.getElementById("bkgrnd").style.zIndex="1"; 
} 
</script>

источник

2014-01-13 05:15:14

Спасибо, как ваши варианты, кажется, работа до сих пор. Я просто получаю удовольствие от интеграции кода ahah! Приветствия. – CameoCream

Проблема с укладкой слоев

ответ

Смежные вопросы