كيفية فرض حدود المغلق لعرضها على الصفحة الطبقات؟

Question

وأنا محاولة رمز صندوق وشعرات الرسوم البيانية في أتش تي أم أل. المسألة هي، لدي الحدود حول شعبة (كما هو الحال في المربع)، ولكن تختفي هذه الحدود عندما تتراكب طبقة السابقة، والذي يحتوي على صورة ملونة النطاقات. تفضيل لا لاستخدام صورة الخلفية (أو الألوان) هنا ما اذا كان يمكنني تجنب ذلك.

ووأتش تي أم أل هو:

<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div>

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td>
</tr>
</table>

ووالمغلق هو:

table#BoxAndWhiskers tr.graphArea td {
    width: 33%;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes {
    z-index: 1;
    margin-top: -250px;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox {
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 2px solid black;
}

لاحظ هامش قمة -250px في المغلق لdiv.graphBoxes. كما انخفض هذا، سترى تظهر الحدود حول صندوق لأنها نظرة خاطفة من الطبقة السابقة.

هل من الممكن أن تظهر الحدود في هذه الحالة؟ شكرا ...

Answer 1

وأنت لا يمكن أن طبقة عنصر دون الحاجة لتحديد المواقع.

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}

Answer 2

وربما لديك فقط لضبط الهوامش وسائد لجعل حدود تظهر بالطريقة التي تريد. نصيحتي هي لإزالة كافة الحشو والهامش، وإضافة

* { margin: 0; padding: 0; }

وإلى الأعلى من الأنماط الخاصة بك. ثم ضبط جميع سائد والهوامش، بعرض ومرتفعات لجعلها تبدو وكأنها تشعر به.

ونضع في اعتبارنا أن مؤشر z لا ينطبق على العناصر التي لا يوجد لديه موقف الملكية في ورقة أنماط.

وتخمين المتواضع هو أن الهامش السلبي يسبب مشاكل.

Answer 3

وأحيانا يحدث أن شعبة ديه أي إشارة في الملف المغلق، لذلك يحدد الحدود تلقائيا أو الحشو لبعض القيمة بيكسل. إذا كنت specifiy رقم img في المغلق يمكنك التخلص من هذا الإعداد مزعج. وأنا أتفق تماما مع موقف الجواب. لديك لتعيين أي شعبة أو غيرها محدد خلق لكم كما اقاربهم، ساكنة، المطلق، وما إلى ذلك. ويمكن الاطلاع على شرح شامل لموقف ممتلكات دورة في المدرسة CSS W3C.

ونأمل أن يكون هذا يمكن أن تعطي مزيد من المساعدة!

Answer 4

وانه من الصعب ان نقول بالضبط ما يحدث دون وجود صورة لنرى، ولكن اعتقد انه اذا قمت بزيادة فهرس z الطبقة التي تريد على رأس إلى 9999 ثم قم بتغيير طبقة من تحت ض مؤشر ل-100 أنه ينبغي يعمل كما هو متوقع.