2010-11-21 11 views
47

मैं डीआईवी को हमेशा स्क्रीन के ऊपरी दाएं कोने पर कैसे तैरता हूं, ताकि जब भी मैं पृष्ठ को स्क्रॉल करता हूं, तब भी DIV उसी निश्चित स्थान पर दिखाई देता है? धन्यवाद।डीआईवी हमेशा शीर्ष दाएं कोने में स्क्रीन पर कैसे तैरते हैं?

+0

के लिए position:fixed अनुकरण करेगा, यह लिंक देखें, मुझे लगता है कि आप चिपचिपा फ़्लोटिंग पाद लेख के विपरीत चाहते हैं। Http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer- टू-स्टिक-टू-द-डाउन-द-व्यूपोर्ट-इन-यानी -6 – kobe

उत्तर

69

उपयोग position: fixed, और पृष्ठ के top और right पक्षों के लिए यह लंगर:

#fixed-div { 
    position: fixed; 
    top: 1em; 
    right: 1em; 
} 

IE6 position: fixed का समर्थन नहीं करता है, लेकिन। यदि आपको IE6 में इस कार्यक्षमता की आवश्यकता है, तो this purely-CSS solution चाल चल रहा है। stylesheet में दिखाई देने के लिए आपको कुछ शैलियों को काम करने के लिए एक रैपर <div> की आवश्यकता होगी।

+0

धन्यवाद, लेकिन मुझे एक क्रॉस-ब्राउज़र समाधान की आवश्यकता है, चाहे इसमें केवल सीएसएस या सीएसएस और जावास्क्रिप्ट का मिश्रण शामिल है या नहीं। – akanevsky

+0

@akavsky आप jquery function $ (window) .scroll (function() { } के साथ ठीक हैं); तो हम आसानी से पोस्ट कर सकते हैं .... jquerys animate – kobe

+0

का उपयोग कर दाएं कोने में स्थिति पर टिप्पणी करने के लिए: आईई में काम नहीं कर रहा है, http://www.howtocreate.co.uk/fixedPosition.html इसके लिए कामकाज है । – digitalfoo

11

उपयोग position:fixed, जैसा कि पहले कहा गया है, IE6 position:fixed को नहीं पहचानता है, लेकिन कुछ सीएसएस जादू के साथ आप IE6 व्यवहार करने के लिए प्राप्त कर सकते हैं:

html, body { 
    height: 100%; 
    overflow:auto; 
} 
body #fixedElement { 
    position:fixed !important; 
    position: absolute; /*ie6 */ 
    bottom: 0; 
} 

!important झंडा यह तो आप का उपयोग करने की जरूरत नहीं करता है आईई के लिए एक सशर्त टिप्पणी। इसमें #fixedElement सभी ब्राउज़रों में position:fixed का उपयोग करेगा, लेकिन आईई, और IE, position:absolutebottom:0 के साथ प्रभावी होगा। यह आईई 6

+1

आप '* html body #fixedElement {position: absolute; } 'उस नियम के बाद। – BoltClock

+0

@ बोल्टक्लॉक अच्छा बिंदु। – Alex

+0

क्या यह क्रोम में था, लेकिन दूसरी स्थिति 'निश्चित' से अधिक है, इसलिए मैं उन दोनों के आदेश को स्वैप कर दूंगा। इससे यह काम – patrick

संबंधित मुद्दे