2011-09-27 14 views
35

मैं सीएसएस का उपयोग कर ब्राउज़र स्क्रीन पर "निश्चित" HTML ऑब्जेक्ट बनाने के लिए एक चाल की तलाश में हूं। मैं चाहता हूं कि यह हर समय एक ही स्थिति में रहें, भले ही उपयोगकर्ता दस्तावेज़ के माध्यम से स्क्रॉल करता हो। मुझे यकीन नहीं है कि इसके लिए उचित शब्द क्या है।सीएसएस स्क्रीन पर "निश्चित" स्थिति पर तत्व रखने के लिए

यह फेसबुक पर चैट बटन या फीडबैक बटन जैसा होगा जो पूरे पृष्ठ पर आपके पीछे आने वाली कुछ वेबसाइटों पर है।

मेरी स्थिति में, मैं हर समय स्क्रीन के पूर्ण नीचे-दाएं कोने में एक div रखना चाहता हूं। नमूना सीएसएस की सराहना की।

उत्तर

38

आप के लिए position: fixed.

तलाश सकते हैं IE6 और कई मोबाइल उपकरणों को छोड़कर हर जगह काम करता है।

+1

लेकिन आप इसके लिए jQuery उपयोग करने की कोशिश की है? –

+1

@MichaelJCalkins मेरे पास है, और यह कमाल था! आईओएस और एंड्रॉइड के बारे में नोट के लिए –

+5

http://needsmorejquery.com/ – kramer65

1

position: fixed;

ऐसा करने देंगे।

यह अपवाद के साथ position:absolute; की तरह संभालता है कि यह विंडो के साथ स्क्रॉल करेगा क्योंकि उपयोगकर्ता सामग्री को स्क्रॉल करता है।

0

आप इस तरह यह कर सकते हैं:

#mydiv { 
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

यह एक div पैदा करेगा, कि अपनी स्क्रीन के शीर्ष पर तय की जाएगी। - fixed

24

सबसे आसान तरीका है position: fixed उपयोग करने के लिए है:

.element { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

http://www.w3.org/TR/CSS21/visuren.html#choose-position

(ध्यान दें कि स्थिति तय गाड़ी है/iOS और Android ब्राउज़र पर काम नहीं करता है)

+0

+1! –

3

ट्वीक :

position:fixed; 

काम करता है, लेकिन यह कुछ विकल्पों को तोड़ देता है .... उदाहरण के लिए एक स्क्रॉल करने योग्य मेनू जो एक निश्चित स्थिति के साथ टैग किया गया है, अब ब्राउज़र विंडो के साथ विस्तारित नहीं होगा ... इच्छा है कि शीर्ष पर हमेशा पिन करें/हमेशा दिखाई देने वाला कोई अन्य तरीका

0

इस एक का प्रयास करें:

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
} 
8

सुनिश्चित करें कि आपके सामग्री एक div, कहो DivFix में रखा गया है।

<div id="divfix">Your Code goes here</div> 

Css:

#divfix { 
     bottom: 0; 
     right: 0; 
     position: fixed; 
     z-index: 3000; 
     } 

आशा, यह तुम्हारी मदद करेगा ..

0

एचटीएमएल

<div id="fixedbtn"><button type="button" value="Delete"></button></div> 

सीएसएस

#fixedbtn{ 
position: fixed; 
margin: 0px 10px 0px 10px; 
width: 10%; 
} 
1

आदेश किसी चित्र पर चल एक ही स्थान में पाठ जब ब्राउज़र ज़ूम बदल रहा रखने के लिए, मैं इस सीएसएस इस्तेमाल किया:

position: absolute; 
margin-top: -18% 

मैं पतला निश्चित पिक्सल के बजाय%% यह क्या करता है। चीयर्स!

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