[CSS] خاصية z-index وطرق استخدامها بالتفصيل

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.

[CSS] خاصية z-index وطرق استخدامها بالتفصيل

خاصية z-index في الـ CSS هي من الخصائص الجميلة حقيقة وتكمن فائدتها في ترتيب العناصر فوق بعضها البعض , لاكن هذه الخاصية ليس لها فائده بدون position , لذالك لنجعلها تعمل بنجاح نحتاج الى وضع position في نفس الديف الذي هي به.

نبداء بالامثلة والتطبيق : 

سنقوم بأنشاء 2 div هكذا : 

<div class="box1"></div>
<div class="box2"></div>

وستكون لهما خصائص css : 

div{
  width: 200px;
  height: 200px;
}
div.box1{
  background-color: #d50000;
}
div.box2{
  background-color: #4a148c;
}

ستكون النتيجة الطبيعيه هكذا : 

الآن سنعطي خاصية z-index للعنصرين، بحيث يكون الـ div.box2 فوق الـ div.box1، وسنلاحظ النتيجة :

div.box1{
  z-index: 1;
}
div.box2{
  z-index: 2;
}

في الكود السابق، من المفترض أن يصبح العنصر div.box2 فوق العنصر div.box1، ولكن عندما نشاهد النتيجة فلن يتغير أي شيء عن السابق، لماذا؟
لأن العناصر لا تحمل خاصية position، أي كما ذكرنا في السابق، أن خاصية z-index لا تعمل إلا مع خاصية position
لذا سنعطيها الخصائص التالية :

div{
  position: absolute;
}

ستكون النتيجة كالتالي :

الآن لتوضيح الخصائص السابقة، ينغير مكان كل عنصر :

div.box1{
  left: 100px;
  top: 100px;
}
div.box2{
  left: 200px;
  top: 200px;
}

ستكون النتيجة كالتالي :

انتهينا.


الآن سنشرح الجزء الأهم، والذي يواجه الجميع مشكلة فيه، سنشرحها بتطبيق عملي،
الآن سنضيف عنصر جديد div.box1-2 داخل العنصر الأب div.box1
ليصبح الكود كالتالي:

<div class="box1">
  <div class="box1-2"></div>
</div>
<div class="box2"></div>

كود css الخاص به سيكون بالشكل التالي :

 div.box1-2{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: #00bfa5;
}

ستكون النتيجة بالشكل التالي :

الآن المشكلة التي تواجه البعض، هو أنه يريد إن يجعل العنصر div.box1-2 فوق كل شيء، فيعطيه الخاصية بالشكل التالي :

div.box1-2{
  z-index: 9999;
}

رغم أننا أعطينا الخاصية z-index أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو : 

للتوضيح أكثر :

الترتيب النهائي الذي سيظهر لنا على المتصفح كالتالي:

1- div.box1
2- div.box1-2
3- div.box2

س/ ما السبب أن العنصر div.box1-2 لم يكن أعلى العناصر من حيث الترتيب، رغم حصوله على أعلى قيمة ؟

السبب واضح، لأن العنصر div.box1-2 موجود داخل أب وهو div.box1 له ترتيب أقل من العنصر الآخر الموجود فوق كل شيء وهو div.box2


الشرح منقول "  كتبه : محمد الحلبي في ترايدنت للفائدة.

سلايد شو خفيف احترافي لمدونة بلوجر 2014

A+ A- 

أعدادات النص 

سلايد شو خفيف وأحترافي لمدونة بلوجر 2014

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

سلايد شو خفيف احترافي لمدونة بلوجر 2014

سلايد شو بسيط وخفيف للمدونة يتمتع بالسرعه , ايضاَ السلايد شو تقريباَ خالي من الروابط الخارجيه وذالك لانني فككت هذه الروابط وجعلتها مباشره تعمل بدون الذهاب للخارج , ايضا قمت بتعريبه واضافة خط tahoma للدسكربشن .
ايضاَ جعلت طريقة التركيب من خلال التخطيط نفسه وذالك لتسهيل العمليه على الكل بأذن الله , ايضاَ سأشرح بعض الاكواد في السلايد شو التي يحتاجها البعض , السلايد شو نقلته من مدونة مداد الجليد ولاكن التعديلات قمت بها .

صورة : 

سلايد شو خفيف وأحترافي لمدونة بلوجر 2014

مثال مباشر : من هنا

طريقة التركيب : 

• ادخل مدونتك.
• التخطيط .
• أضافة اداة html/javascript
• الصق هذا الكود فيها مع تغير ما سأذكر :

<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
var AutoCoinConfig = {
 url_blog: "http://blog.7lolblogger.com/",
 MaxPost: 8,
 cmtext: "تعليقات",
 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "comment number",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'السابق',
 nextText: 'التالي'
};

</script>

<script type="text/javascript">
  (function(f){var e=[],c=[],k=[],m=[],d=[],h=[],b=[],g=[],l=[],a=[],j=[];f.fn.coinslider=f.fn.CoinSlider=function(A){var r=function(E){var I=parseInt(e[E.id].width/e[E.id].spw),D=I,L=parseInt(e[E.id].height/e[E.id].sph),H=L,C=0,J=0,K=0,G,F,N=e[E.id].width-e[E.id].spw*D,B=N,M=e[E.id].height-e[E.id].sph*H,O=M;for(G=1;G<=e[E.id].sph;G++){B=N;if(O>0){O--;H=L+1}else{H=L}for(F=1;F<=e[E.id].spw;F++){if(B>0){B--;D=I+1}else{D=I}c[E.id][C]=G+""+F;C++;if(e[E.id].links){f("#"+E.id).append("<a href='"+m[E.id][0]+"' class='cs-"+E.id+"' id='cs-"+E.id+G+F+"' style='width:"+D+"px; height:"+H+"px; float: left; position: absolute;'></a>")}else{f("#"+E.id).append("<div class='cs-"+E.id+"' id='cs-"+E.id+G+F+"' style='width:"+D+"px; height:"+H+"px; float: left; position: absolute;'></div>")}f("#cs-"+E.id+G+F).css({"background-position":-J+"px "+(-K+"px"),left:J,top:K});J+=D}K+=H;J=0}f(".cs-"+E.id).mouseover(function(){f("#cs-navigation-"+E.id).show()});f(".cs-"+E.id).mouseout(function(){f("#cs-navigation-"+E.id).hide()});f("#cs-title-"+E.id).mouseover(function(){f("#cs-navigation-"+E.id).show()});f("#cs-title-"+E.id).mouseout(function(){f("#cs-navigation-"+E.id).hide()});if(e[E.id].hoverPause){f(".cs-"+E.id).mouseover(function(){e[E.id].pause=true});f(".cs-"+E.id).mouseout(function(){e[E.id].pause=false});f("#cs-title-"+E.id).mouseover(function(){e[E.id].pause=true});f("#cs-title-"+E.id).mouseout(function(){e[E.id].pause=false})}};var y=function(C){clearInterval(b[C.id]);var B=e[C.id].delay+e[C.id].spw*e[C.id].sph*e[C.id].sDelay;b[C.id]=setInterval(function(){v(C)},B)};var v=function(B,C){if(e[B.id].pause===true){return}z(B);a[B.id]=0;l[B.id]=setInterval(function(){o(B,c[B.id][a[B.id]])},e[B.id].sDelay);f(B).css({"background-image":"url("+k[B.id][g[B.id]]+")"});if(typeof(C)=="undefined"){g[B.id]++}else{if(C=="prev"){g[B.id]--}else{g[B.id]=C}}if(g[B.id]==k[B.id].length){g[B.id]=0}if(g[B.id]==-1){g[B.id]=k[B.id].length-1}f(".cs-button-"+B.id).removeClass("cs-active");f("#cs-button-"+B.id+"-"+(g[B.id]+1)).addClass("cs-active");if(h[B.id][g[B.id]]){f("#cs-title-"+B.id).css({opacity:0}).animate({opacity:e[B.id].opacity},e[B.id].titleSpeed);f("#cs-title-"+B.id).html(h[B.id][g[B.id]])}else{f("#cs-title-"+B.id).css("opacity",0)}};var o=function(C,B){f(".cs-"+C.id).attr("href",m[C.id][g[C.id]]).attr("target",d[C.id][g[C.id]]);if(a[C.id]==e[C.id].spw*e[C.id].sph){clearInterval(l[C.id]);return}f("#cs-"+C.id+B).css({opacity:0,"background-image":"url("+k[C.id][g[C.id]]+")"});f("#cs-"+C.id+B).animate({opacity:1},300);a[C.id]++};var p=function(C){var B;f(C).append("<div id='cs-navigation-"+C.id+"'></div>");f("#cs-navigation-"+C.id).hide();f("#cs-navigation-"+C.id).append("<a href='#' id='cs-prev-"+C.id+"' class='cs-prev'>"+e[C.id].prevText+"</a>");f("#cs-navigation-"+C.id).append("<a href='#' id='cs-next-"+C.id+"' class='cs-next'>"+e[C.id].nextText+"</a>");f("#cs-prev-"+C.id).css({position:"absolute",top:e[C.id].height/2-15,left:0,"z-index":1001,"line-height":"30px",opacity:e[C.id].opacity}).click(function(D){D.preventDefault();v(C,"prev");y(C)}).mouseover(function(){f("#cs-navigation-"+C.id).show()});f("#cs-next-"+C.id).css({position:"absolute",top:e[C.id].height/2-15,right:0,"z-index":1001,"line-height":"30px",opacity:e[C.id].opacity}).click(function(D){D.preventDefault();v(C);y(C)}).mouseover(function(){f("#cs-navigation-"+C.id).show()});f("<div id='cs-buttons-"+C.id+"' class='cs-buttons'></div>").appendTo(f("#coin-slider-"+C.id));for(B=1;B<k[C.id].length+1;B++){f("#cs-buttons-"+C.id).append("<a href='#' class='cs-button-"+C.id+"' id='cs-button-"+C.id+"-"+B+"'>"+B+"</a>")}f.each(f(".cs-button-"+C.id),function(D,E){f(E).click(function(F){f(".cs-button-"+C.id).removeClass("cs-active");f(this).addClass("cs-active");F.preventDefault();v(C,D);y(C)})});f("#cs-navigation-"+C.id+" a").mouseout(function(){f("#cs-navigation-"+C.id).hide();e[C.id].pause=false});f("#cs-buttons-"+C.id).css({left:"50%","margin-left":-k[C.id].length*15/2-5,position:"relative"})};var z=function(F){var G=["random","swirl","rain","straight"],D,C,B,E;if(e[F.id].effect===""){E=G[Math.floor(Math.random()*(G.length))]}else{E=e[F.id].effect}c[F.id]=[];if(E=="random"){B=0;for(D=1;D<=e[F.id].sph;D++){for(C=1;C<=e[F.id].spw;C++){c[F.id][B]=D+""+C;B++}}q(c[F.id])}if(E=="rain"){n(F)}if(E=="swirl"){t(F)}if(E=="straight"){u(F)}j[F.id]*=-1;if(j[F.id]>0){c[F.id].reverse()}};var q=function(B){var D=B.length,C,F,E;if(D===0){return false}while(--D){C=Math.floor(Math.random()*(D+1));F=B[D];E=B[C];B[D]=E;B[C]=F}};var t=function(C){var E=e[C.id].sph,F=e[C.id].spw,L=1,K=1,D=0,H=0,J=0,B,I=true,G;while(I){H=(D===0||D===2)?F:E;for(G=1;G<=H;G++){c[C.id][J]=L+""+K;J++;if(G!=H){switch(D){case 0:K++;break;case 1:L++;break;case 2:K--;break;case 3:L--;break}}}D=(D+1)%4;switch(D){case 0:F--;K++;break;case 1:E--;L++;break;case 2:F--;K--;break;case 3:E--;L--;break}B=w(E,F)-s(E,F);if(F<=B&&E<=B){I=false}}};var n=function(E){var I=e[E.id].sph,B=e[E.id].spw,H=0,G=1,C=1,F=1,D=true;while(D){for(i=F;i<=G;i++){c[E.id][H]=i+""+parseInt(C-i+1);H++}C++;if(G<I&&C<B&&I<B){G++}if(G<I&&I>=B){G++}if(C>B){F++}if(F>G){D=false}}};var u=function(E){var B=0,D,C;for(D=1;D<=e[E.id].sph;D++){for(C=1;C<=e[E.id].spw;C++){c[E.id][B]=D+""+C;B++}}};var s=function(C,B){if(C>B){return B}else{return C}};var w=function(C,B){if(C<B){return B}else{return C}};var x=function(B){c[B.id]=[];k[B.id]=[];m[B.id]=[];d[B.id]=[];h[B.id]=[];g[B.id]=0;a[B.id]=0;j[B.id]=1;e[B.id]=f.extend({},f.fn.coinslider.defaults,A);f.each(f("#"+B.id+" img"),function(C,D){k[B.id][C]=f(D).attr("src");m[B.id][C]=f(D).parent().is("a")?f(D).parent().attr("href"):"";d[B.id][C]=f(D).parent().is("a")?f(D).parent().attr("target"):"";h[B.id][C]=f(D).next().is("span")?f(D).next().html():"";f(D).hide();f(D).next().hide()});f(B).css({"background-image":"url("+k[B.id][0]+")",width:e[B.id].width,height:e[B.id].height,position:"relative","background-position":"top left"}).wrap("<div class='coin-slider' id='coin-slider-"+B.id+"' />");f("#"+B.id).append("<div class='cs-title' id='cs-title-"+B.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");r(B);if(e[B.id].navigation){p(B)}v(B,0);y(B)};this.each(function(){x(this)})};f.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:"",navigation:true,links:true,hoverPause:true,prevText:"prev",nextText:"next"}})(jQuery);

var config=AutoCoinConfig,urlxx=config.url_blog,urltag="/-/"+config.tagName;if(config.url_blog===""){urlxx=window.location.protocol+"//"+window.location.host}if(config.tagName===false){urltag=""}function AutoCoinSlider(w){var u,c,m,g,t,k,b,s,f,e,h,o,v,q,d="",a=w.feed.entry;if(a!==undefined){d="<div id='coinautoslide'>";f=a.length;for(var r=0;r<f;r++){e=a[r].link.length;for(var p=0;p<e;p++){if(a[r].link[p].rel=="alternate"){u=a[r].link[p].href;break}}for(var n=0;n<e;n++){if(a[r].link[n].rel=="replies"&&a[r].link[n].type=="text/html"){m=a[r].link[n].title.split(" ")[0];break}}if("content" in a[r]){t=a[r].content.$t}else{if("summary" in a[r]){t=a[r].summary.$t}else{t=""}}if("media$thumbnail" in a[r]){k=a[r].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+config.imageSize)}else{k=config.pBlank}if(m===0){g=' <span class="cm">'+config.NoCmtext+"</span>"}else{g=' <span class="cm">'+m+" "+config.cmtext+"</span>"}t=t.replace(/<\S[^>]*>/g,"");if(t.length>config.SumChars){t=t.substring(0,config.SumChars)+"..."}c=a[r].title.$t;s=a[r].published.$t.substring(0,10),h=s.substring(0,4),o=s.substring(5,7),v=s.substring(8,10),q=config.MonthNames[parseInt(o,10)-1],b='<span class="date"><span class="dd">'+v+'</span> <span class="dm">'+q+'</span> <span class="dy">'+h+"</span></span>";d+='<a href="'+u+'" target="_blank"><img src="'+k+'" alt="'+c+'"/><span><strong>'+c+"</strong><cite>"+b+g+"</cite><p>"+t+"</p></span></a>"}d+="</div>";$("#coinslidewrap").html(d);$("#coinautoslide").coinslider({width:config.width,height:config.height,spw:config.spw,sph:config.sph,delay:config.delay,sDelay:config.sDelay,opacity:config.opacity,titleSpeed:config.titleSpeed,effect:config.effect,navigation:config.navigation,links:config.links,hoverPause:config.hoverPause,prevText:config.prevText,nextText:config.nextText,})}else{$("#coinslidewrap").html("<span>No result!</span>")}}document.write('<div id="coinslidewrap"/>');document.write('<script type="text/javascript" src="'+urlxx+"/feeds/posts/summary"+urltag+"?redirect=false&max-results="+config.MaxPost+'&alt=json-in-script&callback=AutoCoinSlider"><\/script>');
</script>

الاحمر : حجم السلايد شو , ويجب مراعاة حجم الصورة ايضاَ كي يتناسب معك , المهم غيرهم الثنين واجعلهم نفس الحجم يابطل .
الاصفر : رابط المدونة وهو مهم .
الازرق : طول السلايد شو .


بالتوفيق .