එක් කොට් div ාශයක් තවත් කොට් over ාශයක් උඩින් ආවරණය කරන්නේ කෙසේද?

990

එක් පුද්ගලයෙකු divතවත් පුද්ගලයකුට උඩින් තැබීමට මට සහාය අවශ්‍යයි div.

මගේ කේතය මේ වගේ ය:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

අවාසනාවකට මට පළමු div#infoiහෝ imgඇතුළත කූඩුව දැමිය නොහැක div.navi.

පෙන්වා ඇති පරිදි එය වෙනම divs දෙකක් විය යුතුය , නමුත් මට div#infoiඉහළින් div.naviසහ දකුණු පැත්තට ඉහළින් හා මධ්‍යයේ කේන්ද්‍රගත වන්නේ කෙසේදැයි දැන ගැනීමට අවශ්‍යය div.navi.

— tonyf
source

මෙම ප්‍රශ්නයේ කාරණය නොවේ, නමුත් ඔබට තවත් බෙදීමක් ඇතුළත තවත් බෙදීමක් තිබේ නම්, අභ්‍යන්තර බෙදීම සම්පූර්ණයෙන් හෝ අර්ධ වශයෙන් වෙස්වලාගෙන ඇති නිසා overflow: hidden, overflow: visibleඒ වෙනුවට භාවිතා කරන්න.

— ක්‍රිස්ටෝෆ් රූසි

1284

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

position: relativeළමා අංග ගැන ඉගෙන ගැනීමට මම යෝජනා කරමි position: absolute.

— ඇලෙක්ස්
source

3

ඔබගේ උදව්වට ස්තූතියි ඇලෙක්ස් නමුත් මම දැන් සොයාගන්නේ මගේ කවුළුව ප්‍රමාණය වෙනස් කර එය කුඩා වීමට ඇදගෙන යන විට, මගේ තොරතුරු ප්‍රතිරූපය එහි මාපිය අංශය සමඟ රැඳී නොසිටීමයි. මූලික වශයෙන් අවශ්‍ය වන්නේ තිරය තරමක් ප්‍රමාණයෙන් වෙනස් කර තිබුණද, එය දෙමව්පියන් සමඟ ගමන් කර එකම ස්ථානයක රැඳී සිටීමයි.

— ටෝනිෆ්

3

@tonsils: මෙම විසින් උපදෙස් alex ඔබ අපේක්ෂිත ප්රතිඵලය ලබා දිය යුතුයි, ඒ නිසා ඔබ විස්තර ප්රශ්නය ඇති වෙන දෙයක් තිබිය යුතුයි. ඔබට අපට කේතයේ (HTML + CSS) නියැදියක් ලබා දිය හැකිද?

— එරික් ටයිරේ සිල්ෆ්වර්ස්වර්ඩ්

10

absolutely ස්ථානගත කර ඇති මූලද්‍රව්‍ය ඒවායේ ආසන්නතම පැහැදිලිව ස්ථානගත කර ඇති ( position:absolute|relative|fixed) මව් මූලද්‍රව්‍යයට සාපේක්ෂව ස්ථානගත කර ඇත. තව දුරටත් පැහැදිලි කිරීමක් ... jsfiddle.net/p5jkc8gz

— xandercoded

නඩුව අනුව මෙය අනුවර්තනය කළ හැකිය. මගේ තත්වය තුළ මට #navi ඉහළින් සිටීමට අවශ්‍ය නොවීය: 0 වමේ: 0, සහ සාමාන්‍ය අවස්ථාවක් ලෙස ඔබට HTML කේතයක් තිබේ නම්, එය HTML ගස විග්‍රහ කරන තාක් කල් එය පිහිටා ඇත. ඉතින් සමහර විට මේ අවස්ථාවේ දී එම අර්ථ දැක්වීම අවශ්‍ය නොවේ.

— ෆැබ්රිෂියෝ පීඑච්

437

පිළිගත් විසඳුම විශිෂ්ට ලෙස ක්‍රියා කරයි, නමුත් එය ක්‍රියාත්මක වන්නේ ඇයිද යන්න පිළිබඳ පැහැදිලි කිරීමක් IMO හි නොමැත. පහත උදාහරණය මූලික කරුණු දක්වා තම්බා ඇති අතර වැදගත් CSS අදාළ නොවන මෝස්තර CSS වලින් වෙන් කරයි. ප්‍රසාද දීමනාවක් ලෙස, CSS ස්ථානගත කිරීම ක්‍රියාත්මක වන ආකාරය පිළිබඳ සවිස්තරාත්මක පැහැදිලි කිරීමක් ද මම ඇතුළත් කර ඇත්තෙමි.

ටීඑල්ඩීආර්; ඔබ පමණක් කේතය අවශ්ය නම්, බැස අනුචලනය මලකි .

ගැටලුව වන්නේ

දෙක වෙන වෙනම, සහෝදර සහෝදරියන්, අංග පවතින අතර ඉලක්කය (සමග දෙවන අංගය ස්ථානගත කිරීමට idවන infoiඑය පසුගිය අංගයක් (අ සමඟ එක් තුළ දිස්වන පරිදි,) classක navi). HTML ව්‍යුහය වෙනස් කළ නොහැක.

යෝජිත විසඳුම

අපේක්ෂිත ප්‍රති result ලය ලබා ගැනීම සඳහා අපි දෙවන මූලද්‍රව්‍යය චලනය කිරීමට හෝ ස්ථානගත කිරීමට යන්නෙමු, එය අප අමතනු ඇත, #infoiඑවිට එය අප අමතනු ලබන පළමු අංගය තුළ දිස් .naviවේ. විශේෂයෙන්, අපට #infoiඉහළ දකුණු කෙළවරේ ස්ථානගත වීමට අවශ්‍යයි .navi.

CSS තනතුරට අවශ්‍ය දැනුම

මූලද්රව්ය ස්ථානගත කිරීම සඳහා CSS හි ගුණාංග කිහිපයක් ඇත. පෙරනිමියෙන්, සියලු අංග වේ position: static. මෙයින් අදහස් කරන්නේ මූලද්‍රව්‍යය එහි අනුපිළිවෙල අනුව HTML ව්‍යුහය තුළ ස්ථානගත වනු ඇති බවයි.

අනෙක් positionඅගයන් වේ relative, absolute, sticky, සහ fixed. මූලද්‍රව්‍යයක් positionමෙම වෙනත් අගයන්ගෙන් එකකට සැකසීමෙන් මූලද්‍රව්‍යය ස්ථානගත කිරීම සඳහා පහත සඳහන් ගුණාංග හතරේ සංයෝජනයක් භාවිතා කළ හැකිය:

top
right
bottom
left

වෙනත් වචන වලින් කිවහොත්, සැකසීමෙන් position: absolute, top: 100pxපිටුවේ ඉහළ සිට පික්සල් 100 මූලද්‍රව්‍යය ස්ථානගත කිරීමට අපට එකතු කළ හැකිය . අනෙක් අතට, අපි bottom: 100pxමූලද්‍රව්‍යය සකසන්නේ නම් පිටුවේ පහළ සිට පික්සල් 100 ක් ස්ථානගත වේ.

බොහෝ CSS නවකයින් අතරමං වන ස්ථානය මෙන්න -position: absoluteයොමු රාමුවක් ඇත. ඉහත උදාහරණයේ දී, යොමු රාමුව යනුbodyමූලද්‍රව්‍යයයි. position: absoluteසමගtop: 100pxඅදහස් මූලද්රව්යය, මුදුනේ සිට පික්සල 100 ස්ථානගත වී තිබේbodyඅංගයක්.

positionමව් මූලද්‍රව්‍යයක හැරුණු විට වෙනත් අගයකටposition: static සැකසීම මගින් ස්ථානීය රාමුව හෝ ස්ථාන සන්දර්භය වෙනස් කළ හැකිය . එනම්, මව් අංගයක් ලබා දීමෙන් අපට නව ස්ථාන සන්දර්භයක් නිර්මාණය කළ හැකිය:

position: relative;
position: absolute;
position: sticky;
position: fixed;

උදාහරණයක් ලෙස, <div class="parent">මූලද්‍රව්‍යයක් ලබා දෙන්නේ නම් position: relative, ඕනෑම ළමා අංගයක් <div class="parent">ඒවායේ ස්ථාන සන්දර්භය ලෙස භාවිතා කරයි . ළමා මූලද්‍රව්‍යයක් ලබා දී ඇත්නම් position: absoluteසහ top: 100pxමූලද්‍රව්‍යය මූලද්‍රව්‍යයේ ඉහළ සිට පික්සල් 100 ක් ස්ථානගත කරනු ඇත <div class="parent">, මන්ද <div class="parent">එය දැන් ස්ථාන සන්දර්භයයි.

දැනුවත් විය යුතු අනෙක් සාධකය වන්නේ සිරස් අනුපිළිවෙලයි - නැතහොත් ඉසෙඩ් දිශාවට මූලද්‍රව්‍ය ගොඩගැසී ඇති ආකාරයයි. මෙහිදී දැනගත යුතු කරුණ නම් මූලද්‍රව්‍යවල සිරස් අනුපිළිවෙල පෙරනිමියෙන් HTML ව්‍යුහය තුළ ඒවායේ අනුපිළිවෙලෙහි ප්‍රතිලෝමයෙන් අර්ථ දැක්වීමයි. පහත උදාහරණය සලකා බලන්න:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

මෙම උදාහරණයේ දී, <div>මූලද්‍රව්‍ය දෙක පිටුවේ එකම ස්ථානයක ස්ථානගත කර ඇත්නම්, <div>Top</div>මූලද්‍රව්‍යය මූලද්‍රව්‍යය ආවරණය කරයි <div>Bottom</div>. HTML ව්‍යුහයෙන් <div>Top</div>පසුව එන බැවින් <div>Bottom</div>එයට ඉහළ සිරස් අනුපිළිවෙලක් ඇත.

කේත ස්නිපටය පෙන්වන්න

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

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

ස්නිපටය පුළුල් කරන්න

z-indexහෝ orderගුණාංග භාවිතා කරමින් CSS සමඟ ගොඩගැසීමේ අනුපිළිවෙල වෙනස් කළ හැකිය .

මූලද්‍රව්‍යවල ස්වාභාවික HTML ව්‍යුහය යන්නෙන් අපට පෙනී සිටීමට අවශ්‍ය topමූලද්‍රව්‍යය අනෙක් මූලද්‍රව්‍යයට පසුව පැමිණෙන බැවින් අපට මෙම නිකුතුවේ සිරස් අනුපිළිවෙල නොසලකා හැරිය හැකිය .

එබැවින්, ඇති ගැටලුව වෙත ආපසු යන්න - මෙම ගැටළුව විසඳීම සඳහා අපි ස්ථාන සන්දර්භය භාවිතා කරමු.

විසඳුම

ඉහත සඳහන් කළ පරිදි, අපගේ ඉලක්කය වන්නේ #infoiමූලද්‍රව්‍යය ස්ථානගත කිරීම ය .navi. මෙය සිදු කිරීම සඳහා, අපි නව මූලද්‍රව්‍යයක් තුළ .naviසහ #infoiමූලද්‍රව්‍යයන් ඔතා, <div class="wrapper">එවිට අපට නව ස්ථාන සන්දර්භයක් නිර්මාණය කළ හැකිය.

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

එවිට ලබා දීම මගින් නව තනතුරක් සන්දර්භය නිර්මාණය .wrapperවූ position: relative.

.wrapper {
  position: relative;
}

මෙම නව සන්දර්භය තත්ත්වය සමඟ, අපි ස්ථානගත කළ හැක්කේ #infoiතුළ .wrapper. පළමුව, #infoia ලබා දෙන්න position: absolute, අපට #infoiනියත වශයෙන්ම ස්ථානගත වීමට ඉඩ දෙන්න .wrapper.

එවිට එක් top: 0හා right: 0තනතුරට #infoiඉහල දකුණු කෙළවරේ අංගයක්. මතක තබා ගන්න, #infoiමූලද්රව්යය .wrapperඑහි ස්ථාන සන්දර්භය ලෙස භාවිතා කරන නිසා, එය මූලද්රව්යයේ ඉහළ දකුණේ වනු ඇත .wrapper.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

මක්නිසාද යත් .wrapperඑය හුදෙක් බහාලුමක් වන නිසා .navi, #infoiඉහළ දකුණු කෙළවරේ .wrapperස්ථානගත කිරීම ඉහළ දකුණු කෙළවරේ ස්ථානගත වීමේ බලපෑම ලබා දෙයි .navi.

එහි අපට එය තිබේ, #infoiදැන් ඉහළ දකුණු කෙළවරේ ඇති බව .naviපෙනේ.

ප්රතිඵලය

පහත උදාහරණය මූලික කරුණු දක්වා තම්බා ඇති අතර අවම මෝස්තර කිහිපයක් අඩංගු වේ.

කේත ස්නිපටය පෙන්වන්න

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

විකල්ප (ජාලක) විසඳුමක්

මෙන්න ස්ථානගත කිරීම CSS විදුලිබල පද්ධතියට භාවිතා විකල්ප විසඳුමක් තියෙන්නේ .naviසමග අංගයක් #infoiඈත දකුණු අංගයක්. gridහැකිතාක් පැහැදිලි කිරීමට මම වාචික ගුණාංග භාවිතා කර ඇත්තෙමි .

කේත ස්නිපටය පෙන්වන්න

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

විකල්ප (ආවරණයක් නැත) විසඳුමක්

අපට කිසිදු HTML එකක් සංස්කරණය කළ නොහැකි නම්, එයින් අදහස් කරන්නේ අපට එතීමේ අංගයක් එක් කළ නොහැකි බවයි, අපට තවමත් අපේක්ෂිත ප්‍රති achieve ල ලබා ගත හැකිය.

භාවිතා කරනු වෙනුවට, position: absoluteමත #infoiඅංගයක්, අපි භාවිතා කරන්නේ position: relative. #infoiමූලද්‍රව්‍යය එහි පෙරනිමි ස්ථානයේ සිට .naviමූලද්‍රව්‍යයට පහළින් නැවත ස්ථානගත කිරීමට මෙය අපට ඉඩ දෙයි . සමග position: relativeඅපි සෘණ භාවිතා කළ හැකි topවන ප්රකෘති තත්ත්වය එය දක්වා ඉවත් කිරීමට අගය, leftවටිනාකම 100%භාවිතා ඍණ වූ පික්සල කිහිපයක් left: calc(100% - 52px)දකුණු පැත්තේ එය ස්ථානගත කිරීම.

කේත ස්නිපටය පෙන්වන්න

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

ස්නිපටය පුළුල් කරන්න

— බ්‍රෙට් ඩිවුඩි
source

32

IMO වඩාත්ම ප්‍රයෝජනවත් ප්‍රවේශය මෙය ක්‍රියාත්මක වන්නේ ඇයිද යන්න පැහැදිලි කරන බැවිනි!

— බ්‍රෙට් වෙයින්රාබ්

23

මම මෙතෙක් දැක ඇති ස්ථානගත කිරීම් ක්‍රියා කරන ආකාරය පිළිබඳ හොඳම පැහැදිලි කිරීම මෙය විය හැකිය. සංක්ෂිප්ත, නමුත් එය නිවැරදිව ලබා ගැනීමට තරම් ගැඹුරු.

— මාසෙල්

2

පිළිතුරේ ගුණාත්මකභාවය පිළිබඳ ඩිටෝ. මා දුටු පැහැදිලි පැහැදිලි කිරීම.

— වේඩ් හැට්ලර්

2

විශේෂයෙන් css හි නවකයින් සඳහා මෙය හොඳ පිළිතුරකි

— අලි එසැට් ඔඩේ

2

පැහැදිලි කිරීම සඳහා කුඩෝස්

— Joey587

113

භාවිතා කරන ලද්දේ divශෛලිය සමග z-index:1;සහ position: absolute;ඔබ ඔබේ රනින් ආලේප කළ හැකි divවෙනත් කිසිම div.

z-indexබෙදීම් 'සිරස්' අනුපිළිවෙල තීරණය කරයි. ඉහළ අගයක් z-indexඇති ඩිව් එකක් පහළින් ඇති ඩිව් එකක් ඉදිරිපිට දිස් වේ z-index. මෙම දේපල ක්‍රියාත්මක වන්නේ ස්ථානගත කළ මූලද්‍රව්‍ය සමඟ පමණක් බව සලකන්න .

— හරී තාකූර්
source

6

ඔබට උදාහරණයක් දිය හැකිද?

— ෆැබ්රිෂියෝ පීඑච්

3

ස්ථානගත කරන ලද මූලද්රව්ය පිළිබඳ සටහන ඉතා වැදගත් වේ.

— ලෝරන්ස් ඩොල්

මෙම පිළිතුර කොතරම් අසම්පූර්ණද යත්, එයට හේතුව පැහැදිලි කිරීමට සම්පූර්ණ තනතුරක් අවශ්‍ය වේ. ගොඩගැසීමේ සන්දර්භය දෙස බලන්න.

— බොජිඩාර් ස්ටැන්චෙව්

48

නව ග්‍රිඩ් සීඑස්එස් පිරිවිතරයට වඩා අලංකාර විසඳුමක් සපයයි. භාවිතා position: absoluteකිරීම අතිච්ඡාදනය හෝ පරිමාණ ගැටළු වලට තුඩු දිය හැකි අතර ග්‍රිඩ් ඔබව අපිරිසිදු CSS හක්ක වලින් ගලවා ගනු ඇත.

බොහෝ අවම ජාලක ආවරණ උදාහරණය:

HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

ඒක තමයි. ඔබ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා ගොඩනගා නොගන්නේ නම්, ඔබේ කේතය බොහෝ විට ක්‍රියාත්මක වනු ඇත.

— ja0nz
source

4

මෙය ඉහළම පිළිතුර විය යුතුය.

— ඉන්ලයින්

1

උසස් පිළිතුර. තෝරාගත් පිළිතුර නැවත තක්සේරු කළ යුතුය.

— අබ්දුල් ජී

පරිපූර්ණ විසඳුම

— ඩෙනිස් ඩා කිං

26

CSS මත පදනම්ව 100% සරල විසඳුමක් මෙන්න. "රහස" යනු display: inline-blockඑතීමේ මූලද්රව්යය භාවිතා කිරීමයි . මෙම vertical-align: bottomරූපයේ ඇති අංගයක් පසු සමහරක් බ්රවුසර එකතු කරන 4px පුරවන ජයගැනීමට නම්න් වේ.

උපදෙස් : එතීමට පෙර ඇති මූලද්‍රව්‍යය පේළිගත නම් ඒවා කූඩු කළ හැකිය. මෙම අවස්ථාවේ දී ඔබට කන්ටේනරයක් තුළ "එතීම" ඔතා ගත හැකිය display: block- සාමාන්‍යයෙන් හොඳ සහ පැරණි div.

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

ස්නිපටය පුළුල් කරන්න

— ටුකෝ
source

21

ඔබට අවශ්‍ය වන්නේ මෙයයි:

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

ස්නිපටය පුළුල් කරන්න

— ධවාල් තාකෝර්
source

9

මම බොහෝ කේත රචකයෙකු හෝ CSS පිළිබඳ විශේෂ expert යෙක් නොවෙමි, නමුත් මම තවමත් ඔබේ අදහස මගේ වෙබ් නිර්මාණ වලදී භාවිතා කරමි. මම විවිධ යෝජනා ද අත්හදා බැලුවෙමි:

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

ඇත්ත වශයෙන්ම ඔවුන් දෙදෙනාම වටා එතීමක් ඇත. වම් ආන්තිකයන් සහ ඉහළ ස්ථාන සහිත ශීර්ෂ පා div යේ දර්ශනය වන මෙනු අංශයේ පිහිටීම ඔබට පාලනය කළ හැකිය. ඔබ කැමති නම් div මෙනුව නිවැරදිව පාවීමට සැකසිය හැකිය.

— මුහම්මද් අහ්සාන්
source

0

වෙනත් අංශයකට වඩා පැටවීමේ නිරූපකයක් සහිත ආවරණ ආචරණයක් ගෙන ඒමට සරල උදාහරණයක් මෙන්න.

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

එය මෙතැනින් උත්සාහ කරන්න: http://jsbin.com/fotozolucu/edit?html,css,output

— නිෂාඩ් අප්
source