CSS رأس لا يصطف.محاولة عرض الشعار باستخدام TOP -20PX بقية القائمة لا تصطف

Question

أحاول إنشاء شريط رأس يحتوي على صورة تتبعها عنوان وسيارة القائمة. يتم عرض الشريط بعد 50px وأريد أن يتم نقل الصورة قليلا بحيث تكون فوق الجزء العلوي من غلاف التفاف ويظهر قليلا في 50px أعلاه. باستخدام الموضع المطلق على التفاف DIV وموضعه بالنسبة للصورة، فإن نقله بواسطة 20PX يعمل بشكل جيد ولكن عندما أقوم بهذا بقية العناصر في Div البقاء تحت ذلك. هل هناك طريقة لتحريك تلك العناصر الأخرى حتى تكون مضمنة مع الصورة؟

لقد صنعت jsfiddle بسيط لما أحاول القيام به هنا: http://jsfiddle.net/ 67st /

html:

giveacodicetagpre.

css:

giveacodicetagpre.

أحتاج إلى العنوان والقائمة التي يجب وضعها في منتصف الصورة (المربع الأحمر).

باستخدام الموضع: يحركها مطلقا إلى الأعلى والتي لا بأس بها ولكن العنوان وطبقة القائمة في الجزء العلوي من بعضها البعض.

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

Answer 1

مثل هذا؟ http://jsfiddle.net/67stt/1/

إضافة:

giveacodicetagpre.

إلى القائمة والعنوان