तालिका पंक्ति (tr) पर एक div (या कोई तत्व) ओवरले कैसे करें?

मैं एक पंक्ति पंक्ति (tr टैग) पर एक div (या कोई भी तत्व जो काम करेगा) ओवरले करना चाहता है जो एक से अधिक कॉलम होता है।तालिका पंक्ति (tr) पर एक div (या कोई तत्व) ओवरले कैसे करें?

मैंने कुछ विधियों की कोशिश की है, जो काम नहीं कर रहे हैं। मैंने नीचे अपना वर्तमान कोड पोस्ट किया है।

मुझे ओवरले मिलता है, लेकिन सीधे पंक्ति पर नहीं। मैंने ओवरले टॉप को $ divBottom.css ('top') पर सेट करने का प्रयास किया, लेकिन यह हमेशा 'ऑटो' होता है।

तो, क्या मैं सही रास्ते पर हूं, या क्या ऐसा करने का एक बेहतर तरीका है? JQuery का उपयोग करना ठीक है जैसा आप देख सकते हैं।

यदि मैं सही रास्ते पर हूं, तो मैं div को सही तरीके से कैसे प्राप्त करूं? क्या ऑफसेट तत्व, तालिका में ऑफसेट टाइप करें, और मुझे कुछ गणित करने की आवश्यकता है? कोई अन्य गॉथस मैं उसके साथ भाग जाऊंगा?

$(document).ready(function() { 
 
    $('#lnkDoIt').click(function() { 
 
    var $divBottom = $('#rowBottom'); 
 
    var $divOverlay = $('#divOverlay'); 
 
    var bottomTop = $divBottom.attr('offsetTop'); 
 
    var bottomLeft = $divBottom.attr('offsetLeft'); 
 
    var bottomWidth = $divBottom.css('width'); 
 
    var bottomHeight = $divBottom.css('height'); 
 
    $divOverlay.css('top', bottomTop); 
 
    $divOverlay.css('left', bottomLeft); 
 
    $divOverlay.css('width', bottomWidth); 
 
    $divOverlay.css('height', bottomHeight); 
 

 
    $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft); 
 
    }); 
 
});

#rowBottom { outline:red solid 2px } 
 
#divBottom { margin:1em; font-size:xx-large; position:relative; } 
 
#divOverlay { background-color:Silver; text-align:center; position:absolute; z-index:10000; opacity:0.5; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    <title>Overlay Tests</title> 
 
    </head> 
 
    <body> 
 
    <p align="center"><a id="lnkDoIt" href="#">Do it!</a></p> 
 
    <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative"> 
 
     <tr> 
 
     <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> 
 
     </tr> 
 
     <tr id="rowBottom"> 
 
     <td><div id="divBottom"><p align="center">This is the bottom text</p></div></td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> 
 
     </tr> 
 
    </table> 
 
    <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> 
 
    </body> 
 
</html>

स्रोत

2010-06-17 slolife

आप ओवरले div बनाने की जरूरत है एक निरपेक्ष स्थिति है। इसके अलावा पंक्ति के ऊपर और बाएँ पदों के लिए स्थिति() jQuery विधि का उपयोग करें - यहाँ याद आ रही पीस हैं:

 
var rowPos = $divBottom.position(); 
bottomTop = rowPos.top; 
bottomLeft = rowPos.left; 

// 
$divOverlay.css({ 
    position: 'absolute', 
    top: bottomTop, 
    left: bottomLeft, 
    width: bottomWidth, 
    height: bottomHeight 
});

स्रोत

2010-06-17 20:09:03 jhorback

उनकी बहुत ज्यादा पहले से ही "निरपेक्ष स्थिति" उठाया

यह केवल स्क्रिप्ट कि कभी भी मेरे लिए मज़बूती से काम किया है। हालांकि आप "pos()" का उपयोग करने के बारे में सही हैं। – Pointy

यह चाल चल रहा है ... एक बदलाव के साथ: var rowPos = $ divBottom.pos(); var rowPos = $ divBottom.offset() होना चाहिए; । ऑफसेट() दस्तावेज़ में शीर्ष/बाएं है। – slolife

jquery में 'pos' नामक कोई फ़ंक्शन नहीं है। सही वाक्यविन्यास $ divBottom.position() होगा; –

मेक:

div style="position:absolute" 

td style="position:relative;display:block"

और आप jQuery जरूरत नहीं है।

स्रोत

2013-02-02 21:27:23

मैं सैकड़ों में से एक विशिष्ट तालिका पंक्ति का चयन कैसे कर सकता हूं? – koppor

+1 यह एक बहुत ही सरल समाधान है और यह मेरे लिए काम करता है। मैंने एक वर्ग का उपयोग किया: 'td {position: सापेक्ष; प्रदर्शन क्षेत्र;} ।ओवरले {स्थिति: पूर्ण; सफेद अंतरिक्ष: अब्रैप; z- सूचकांक: 1000} 'और फिर पहली सेल करने के लिए वर्ग लागू:' के पाठ बी ' – Roberto

पुनश्च लंबे ब्लॉक - IE के लिए <8 सापेक्ष स्थिति भी करना होगा टीआर पर लागू किया जाना चाहिए। – Roberto

इसके अलावा, सुनिश्चित करें कि बाहरी तत्व (इस मामले में तालिका) अतिप्रवाह संपत्ति छिपी हुई नहीं है। ओवरफ्लो पर छिपी हुई सेटिंग के साथ, कोई ओवरले प्रदर्शित नहीं किया जाएगा!

स्रोत

2013-09-09 15:04:53 Fazi

किसी ऑब्जेक्ट की ऊंचाई और चौड़ाई को सीधे प्राप्त करना। मेरे लिए कठिन हिस्सा पूर्ण स्थिति के लिए शीर्ष और बाएं निर्देशांक था।

function posY(ctl) 
{ 
    var pos = ctl.offsetHeight; 
    while(ctl != null){ 
     pos += ctl.offsetTop; 

     ctl = ctl.offsetParent; 
    } 

    return pos; 
} 
function posX(ctl) 
{ 
    var pos = 0; 
    while(ctl != null){ 
     pos += ctl.offsetLeft; 

     ctl = ctl.offsetParent; 
    } 

    return pos; 

}

स्रोत

2014-02-12 18:41:58 mike

यह करना चाहिए: अपने स्टाइलशीट से:

var bottomTop = $divBottom.offset().top; 
var bottomLeft = $divBottom.offset().left;

स्रोत

2014-05-02 10:55:26

तालिका पंक्ति (tr) पर एक div (या कोई तत्व) ओवरले कैसे करें?

उत्तर

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