asp.net - 如何防止继承“位置：相对”CSS

Question

我的体型如下：

*
{
    padding: 0px;
    margin: 0px;
}
html, body
{
    background-color: #006F92;
    position: relative;
    direction: rtl;
    font: 9pt Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
    color: #0061B7;
    height: 100%;
    top: 0px;
    right: 0px;
}

我的身体中有一个字段集，如下所示：

<fieldset id="fieldset_From">
    <legend>Web Site Names</legend>
    <asp:Label ID="lblFrom" runat="server" Text="Web Site Names" ForeColor="#00FF5A"></asp:Label>&nbsp;&nbsp;
    <telerik:RadComboBox ID="radcbFrom" runat="server" DataSourceID="sdsFrom_WebSites"
        DataTextField="From_WebSite" DataValueField="ID" EnableEmbeddedSkins="false" Skin="BlackByMe"
        ValidationGroup="A" Width="240px" LoadingMessage="Loading..." CausesValidation="False"
        MaxHeight="150px" AppendDataBoundItems="True">
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="All" Value="-1" />
        </Items>
    </telerik:RadComboBox>
</fieldset>

position: relative;Telerik RadComboBox 的滑块在我身上有问题。
我需要身体中的那个定位。
如何防止 RadComboBox Slider 从 body 继承定位？

编辑：
呈现 HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
    <link type="text/css" rel="stylesheet" href="Styles/FromDBTotxt.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadInput_Black/Input.BlackByMe.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadButton_Black/Button.BlackByMe.css">
    <link type="text/css" rel="stylesheet" href="Skins/RadComboBox_Black/ComboBox.BlackByMe.css">
    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=1uAw9jPTc2xXMWXZnwFR0WHd9WYjFZAUCOAtuqocex__v5L75EC9QiX_sCH45VnopNjopRnq8rc8IEBb3KEXdWBHUZf74tOouskOPfCOXucUYuXc1IfLchqzXDq1K-fmB_9PfPUmfdjW8QIXDn5ivw2&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=13iOD6Zoftm8nqRaawCSklC8y9V9g87Y0kr5Ei4P5EElO9xRCq8xhXuPJ30Iwbwg9kiOCjehP62W8g2RapUnp9ZBxIOX0hzU9SVgbYeN9G8djxjjKGLG6WMwLTPG7F3J8Nh0QK_NxEIB1g4ijjLujSVvq2XEv0hC84UsTw08oIA1&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=gLb4irI44ajzCsQ4ReOSJ8ZiF9XR9XzxjpiDIqOJXuhuP0sPMfnjAXjgO-VY4QblDmgpJh-_WxKIQiMZaQROEdEvLAiN2FXshWze-IJ9IgagNyNeDwXhyzF40PDKNRQGdHL4sKP3uvxWW5RW0EAJDg2&amp;t=634696541680000000">
    <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=F2aSoEO9Kst6ePwRmXcY64NfoYAv2uqdm1Rp5bXsLh47toZzK4udXXoUY7k8r2SQSP_Sak2wVUyqGRGFlqokdI7N0ryqScecklidHHWXBA2pio3xJ0yNVAArZyR1DmIlXzTPVjUNjsccsZ6LsfyQRQ2&amp;t=634696541680000000">
</head>
<body>
    <form id="form1" action="FromDBTotxt.aspx" method="post">
    <div style="z-index: 6000; visibility: visible; display: none; overflow: hidden;
        margin-left: 0pt; position: absolute; top: 81px; left: 482.5px; height: 121px;
        width: 240px;" class="rcbSlide">
        <div style="display: block; visibility: visible; top: -121px; left: 0px; width: 238px;"
            class="RadComboBoxDropDown RadComboBoxDropDown_BlackByMe  RadComboBoxDropDown_rtl RadComboBoxDropDown_BlackByMe_rtl"
            id="radcbFrom_DropDown" dir="rtl">
            <div style="height: 119px; width: 100%; overflow: auto;" class="rcbScroll rcbWidth">
                <ul style="list-style: none outside none; margin: 0pt; padding: 0pt;" class="rcbList">
                    <li class="rcbHovered ">All</li><li class="rcbItem ">11</li><li class="rcbItem ">aa</li><li
                        class="rcbItem ">bb</li><li class="rcbItem ">bbb</li><li class="rcbItem ">cc</li><li
                            class="rcbItem ">ccc</li></ul>
            </div>
        </div>
    </div>
    <div class="aspNetHidden">
        <input type="hidden" value=";;System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35:en-US:e71d0a15-7471-4384-9905-78bdf2047cba:ea597d4b:b25378d2;Telerik.Web.UI, Version=2012.1.411.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:ebfa5361-1bb0-4d72-bf6d-db0befdf104a:16e4e7cd:ed16cbdc:f7645509:24ee1bba:f46195d3:2003d0b8:1e771326:aa288e2d:7165f74"
            id="RadScriptManager1_TSM" name="RadScriptManager1_TSM">
        <input type="hidden" value="" id="__EVENTTARGET" name="__EVENTTARGET">
        <input type="hidden" value="" id="__EVENTARGUMENT" name="__EVENTARGUMENT">
        <input type="hidden" value="" id="__LASTFOCUS" name="__LASTFOCUS">
        <input type="hidden" value="/wEPDwUJMjE1MTIwNjQ4D2QWAgIDD2QWDAIFDw9kDxAWAmYCARYCFgIeDlBhcmFtZXRlclZhbHVlBQItMRYCHwAFB0FsbF9MYW4WAmZmZGQCCQ8PFgIeF0VuYWJsZUFqYXhTa2luUmVuZGVyaW5naGRkAg0PEGRkFgFmZAIPDxAPFgIeC18hRGF0YUJvdW5kZ2QPFgMCAQICAgMWAxAFStin24zZhiDYp9uM2YXbjNmEINmH2Kcg2qnYp9mF2YTYp9mLINmB2LnZkdin2YQg2Ygg2KrYs9iqINi02K/ZhyDZh9iz2KrZhtivBQExZxAFcNin24zZhiDYp9uM2YXbjNmEINmH2Kcg2KrZiNiz2Lcg2KfYs9m+2KfbjNiv2LHZh9inINin2LIg2YjYqCDYs9in24zYqiDZhdix2KjZiNi32Ycg2KzZhdi5INii2YjYsduMINi02K/ZhyDYp9mG2K8FATJnEAVR2KfbjNmGINin24zZhduM2YQg2YfYpyDYqtiz2Kog2LTYr9mHINmG24zYs9iq2YbYryDZiCDYqNin24zYryDYqNix2LHYs9uMINi02YjZhtivBQEzZxYBZmQCEw8UKwACDxYIHhNjYWNoZWRTZWxlY3RlZFZhbHVlZB4EVGV4dAUG2YfZhdmHHwFoHwJnZA8UKwAHFCsAAg8WBh8EBQbZh9mF2YceBVZhbHVlBQItMR4IU2VsZWN0ZWRnZGQUKwACDxYGHwQFAjExHwUFAjExHwZoZGQUKwACDxYGHwQFAmFhHwUFAmFhHwZoZGQUKwACDxYGHwQFAmJiHwUFAmJiHwZoZGQUKwACDxYGHwQFA2JiYh8FBQNiYmIfBmhkZBQrAAIPFgYfBAUCY2MfBQUCY2MfBmhkZBQrAAIPFgYfBAUDY2NjHwUFA2NjYx8GaGRkDxQrAQdmZmZmZmZmFgEFd1RlbGVyaWsuV2ViLlVJLlJhZENvbWJvQm94SXRlbSwgVGVsZXJpay5XZWIuVUksIFZlcnNpb249MjAxMi4xLjQxMS40MCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0Fg4CAg8PFgYfBAUG2YfZhdmHHwUFAi0xHwZnZGQCAw8PFgYfBAUCMTEfBQUCMTEfBmhkZAIEDw8WBh8EBQJhYR8FBQJhYR8GaGRkAgUPDxYGHwQFAmJiHwUFAmJiHwZoZGQCBg8PFgYfBAUDYmJiHwUFA2JiYh8GaGRkAgcPDxYGHwQFAmNjHwUFAmNjHwZoZGQCCA8PFgYfBAUDY2NjHwUFA2NjYx8GaGRkAhUPPCsABAEADxYCHwFoZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFCXJhZGNiRnJvbQUNUmFkYnRuR2V0RmlsZQUJcmFkY2JGcm9tDxQrAAIFBtmH2YXZhwUCLTFkfb9wwPpbUuCpYxSZLLpIHeyHbDPMJzu+qYSO8AdXVyE="
            id="__VIEWSTATE" name="__VIEWSTATE">
    </div>
    <script type="text/javascript">
        //&lt;![CDATA[
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }
        function __doPostBack(eventTarget, eventArgument) {
            if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                theForm.__EVENTTARGET.value = eventTarget;
                theForm.__EVENTARGUMENT.value = eventArgument;
                theForm.submit();
            }
        }
        //]]&gt;
</script>
    <script type="text/javascript" src="/WebResource.axd?d=cqUgLmRt1PDc02tdUmiePGftPICf3D-48hjRGcwL5K3eLKNuAYv8U2uk3XygxG-ztdx_jATxom9V7sPijlN-xLrorIsalg6DX1qib_8o31o1&amp;t=634602272469974565"></script>
    <script type="text/javascript" src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&amp;compress=1&amp;_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3ae71d0a15-7471-4384-9905-78bdf2047cba%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2012.1.411.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3aebfa5361-1bb0-4d72-bf6d-db0befdf104a%3a16e4e7cd%3aed16cbdc%3af7645509%3a24ee1bba%3af46195d3%3a2003d0b8%3a1e771326%3aaa288e2d%3a7165f74"></script>
    <script type="text/javascript">
        //&lt;![CDATA[
        if (typeof (Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
        //]]&gt;
</script>
    <div class="aspNetHidden">
        <input type="hidden" value="/wEWDgLqwvGUDQKX9+fxBwKZstXTDgLY3rqSDQLZ3q6SDQLisZz9AQLGn4b/DgLKn8r8DgLLn8r8DgLIn8r8DgLF8OCSAgLO85mIDQLjnNj8AwLO85mIDb7HcTY/Qfm98Hx8Gq9vgGyvxXOrQPxE9OVxUkyuieEt"
            id="__EVENTVALIDATION" name="__EVENTVALIDATION">
    </div>
    <script type="text/javascript">
        //&lt;![CDATA[
        Sys.WebForms.PageRequestManager._initialize('RadScriptManager1', 'form1', ['tsdsFrom_WebSitesPanel', '', 'tRBL_PriorityPanel', '', 'tradcbFromPanel', '', 'tRBL_LanguagePanel', '', 'tRadAjaxManager1SU', 'RadAjaxManager1SU'], ['RBL_Priority', 'RBL_Priority', 'RBL_Language', 'RBL_Language'], [], 90, '');
        //]]&gt;
</script>
    <div id="sdsFrom_WebSitesPanel" style="display: block;">
    </div>
    <!-- 2012.1.411.40 -->
    <div id="RadAjaxManager1SU" style="display: none;">
        <span style="display: none;" id="RadAjaxManager1"></span>
    </div>
    <div style="display: none;" class="RadAjax RadAjax_Black" id="RadAjaxLoadingPanel1">
        <div class="raDiv">
        </div>
        <div class="raColor raTransp">
        </div>
    </div>
    <div id="OuterDiv">
        <a href="javascript:__doPostBack('lbHome','')" class="Link" id="lbHome">خانه</a>
        <fieldset id="fieldset_From">
            <legend>Wes Site Names</legend><span style="color: rgb(0, 255, 90);" id="lblFrom">
                Wes Site Names</span>&nbsp;&nbsp;
            <div id="radcbFromPanel" style="display: block;">
                <div style="width: 240px;" class="RadComboBox RadComboBox_BlackByMe RadComboBox_rtl RadComboBox_BlackByMe_rtl"
                    id="radcbFrom">
                    <table style="border-width: 0pt; border-collapse: collapse;" summary="combobox" class="">
                        <tbody>
                            <tr class="rcbReadOnly">
                                <td class="rcbInputCell rcbInputCellRight" style="width: 100%;">
                                    <input type="text" readonly="readonly" value="All" id="radcbFrom_Input" class="rcbInput"
                                        name="radcbFrom" autocomplete="off">
                                </td>
                                <td class="rcbArrowCell rcbArrowCellLeft">
                                    <a style="overflow: hidden; display: block; position: relative; outline: medium none;"
                                        id="radcbFrom_Arrow">select</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="hidden" name="radcbFrom_ClientState" id="radcbFrom_ClientState" autocomplete="off">
                </div>
            </div>
        </fieldset>
    </div>
    <script type="text/javascript" language="javascript">
        function pageLoad() {

        }

        //&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;

        $(document).ready(function () {

        });

        //&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
        </script>
    <script type="text/javascript">
        //&lt;![CDATA[
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadAjaxManager, { "_updatePanels": "", "ajaxSettings": [{ InitControlID: "RBL_Priority", UpdatedControls: [{ ControlID: "sdsFrom_WebSites", PanelID: "" }, { ControlID: "RBL_Priority", PanelID: "" }, { ControlID: "radcbFrom", PanelID: ""}] }, { InitControlID: "RBL_Language", UpdatedControls: [{ ControlID: "sdsFrom_WebSites", PanelID: "" }, { ControlID: "radcbFrom", PanelID: "" }, { ControlID: "RBL_Language", PanelID: ""}]}], "clientEvents": { OnRequestStart: "", OnResponseEnd: "" }, "defaultLoadingPanelID": "", "enableAJAX": true, "enableHistory": false, "links": [], "styles": [], "uniqueID": "RadAjaxManager1", "updatePanelsRenderMode": 0 }, null, null, $get("RadAjaxManager1"));
        });
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadAjaxLoadingPanel, { "initialDelayTime": 0, "isSticky": false, "minDisplayTime": 0, "skin": "Black", "transparency": 0, "uniqueID": "RadAjaxLoadingPanel1", "zIndex": 90000 }, null, null, $get("RadAjaxLoadingPanel1"));
        });

        WebForm_InitCallback(); Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadComboBox, { "_dropDownWidth": 0, "_maxHeight": 150, "_skin": "BlackByMe", "_text": "همه", "_uniqueId": "radcbFrom", "_value": "-1", "clientStateFieldID": "radcbFrom_ClientState", "collapseAnimation": "{\"duration\":450}", "expandAnimation": "{\"duration\":450}", "itemData": [{ "value": "-1", "selected": true }, { "value": "11" }, { "value": "aa" }, { "value": "bb" }, { "value": "bbb" }, { "value": "cc" }, { "value": "ccc"}], "loadingMessage": "در حال لود شدن ...", "localization": "{\"AllItemsCheckedString\":\"All items checked\",\"ItemsCheckedString\":\"items checked\",\"CheckAllString\":\"Check All\"}", "selectedIndex": 0 }, null, null, $get("radcbFrom"));
        });
        Sys.Application.add_init(function () {
            $create(Telerik.Web.UI.RadButton, { "_postBackReference": "", "clientStateFieldID": "RadbtnGetFile_ClientState", "iconData": {}, "imageData": {}, "text": "دریافت فایل", "toggleStatesData": [], "uniqueGroupName": "", "uniqueID": "RadbtnGetFile", "width": "150px" }, null, null, $get("RadbtnGetFile"));
        });
        //]]&gt;
</script>
    </form>
</body>
</html>

和所有 CSS：

*
{
    padding: 0px;
    margin: 0px;
}
html, body
{
    background-color: #006F92;
    position: relative;
    direction: rtl;
    font: 9pt Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
    color: #0061B7;
    height: 100%;
    top: 0px;
    right: 0px;
}
input, select, option
{
    font-family: Tahoma, 'b yekan' , 'b homa' , 'arial' , Sans-Serif;
}
#OuterDiv
{
    width: 650px;
    height: 100%;
    margin: 0 auto;
}
#OuterDiv .Link:link, #OuterDiv .Link:visited
{
    color: #00FF12;
}
#OuterDiv .Link:hover, #OuterDiv .Link:active
{
    color: #F0FF00;
}
#lbHome
{
    font: bold 15px tahoma;
    position: absolute;
    top: -15px;
    right: 20px;
    text-decoration: none;
}
fieldset
{
    width: 550px;
    margin: 30px;
    padding: 15px;
}
fieldset legend
{
    color: #00eaff;
    font-weight: bold;
    font-size: 12px;
}
fieldset table label
{
    position: relative;
    top: -2px;
    right: 5px;
}
#radcbFromPanel
{
    display: inline !important;
}
#fieldset_From
{

}

表单元素下的 div 是该 RadComboBox 的滑块。

提前致谢

score 3 · Accepted Answer

您可以使用以下属性将 CSS 类显式添加到自定义控件CssClass：

.static-position {
    position: static;
}

<telerik:RadComboBox ID="radcbFrom" CssClass="static-position" ...>
    ....
</telerik:RadComboBox>

更新：我们在评论中找到了具体问题的解决方案。该问题已通过在周围放置另一个<div style="position:relative;">...</div>解决了lbHome，这需要相对定位，并从 body 标签的样式中删除该位置。

score 0 · Accepted Answer

将内联样式添加到您的控件以覆盖父样式。

例如：

style="position: absolute;"

其他定位选项包括：

静态：元素按顺序呈现，就像它们出现在文档流中一样。这是默认设置。

absolute：元素相对于它的第一个定位（非静态）祖先元素定位

固定：元素相对于浏览器窗口定位

relative：元素相对于其正常位置定位，因此“left:20”将元素的 LEFT 位置增加 20 个像素

score 0 · Accepted Answer

0

我看到了position : static 这里。希望它会恢复到默认值。

于 2012-06-15T08:24:34.107 回答

asp.net - 如何防止继承“位置：相对”CSS

3 回答 3

Related

Reference