My two div of a page by oojs-ui is overlapped
If i add position: static, this problem can be fixed, but if i do it, another problem will be emerge, please see this
How to fix both problems at the same time?
<link href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.51.2/oojs-ui-wikimediaui.css" rel="stylesheet"/>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed oo-ui-pageLayout">
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static;">
<div></div>
<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-buttonWidget" style="float: right;">
<a class="oo-ui-buttonElement-button" role="button" title="Example" tabindex="0" rel="nofollow">
<span class="oo-ui-iconElement-icon oo-ui-icon-reload"></span>
<span class="oo-ui-labelElement-label"></span>
<span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span>
</a>
</span>
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-textInputWidget oo-ui-textInputWidget-type-text" id="example" style="max-width: 80%;">
<input type="text" tabindex="0" class="oo-ui-inputWidget-input" value="" readonly="">
<span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span>
<span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span>
</div>
</div>
<br>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-scrollable oo-ui-panelLayout-expanded oo-ui-pageLayout" style="display: flow-root;">
<fieldset class="oo-ui-layout oo-ui-labelElement oo-ui-fieldsetLayout">
<legend class="oo-ui-fieldsetLayout-header">
<span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span>
<span class="oo-ui-labelElement-label">Example</span>
</legend>
<div class="oo-ui-fieldsetLayout-group">
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-expanded" style="display: grid;">
<div></div>
<div class="oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-padded oo-ui-panelLayout-expanded oo-ui-panelLayout-framed" style="display: flow-root; position: static; align-self: center;">
<label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-labelElement-label oo-ui-labelWidget" style="font-size: 5mm;">Example</label>
<br>
<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-iconElement oo-ui-labelElement oo-ui-flaggedElement-progressive oo-ui-flaggedElement-primary oo-ui-buttonWidget">
<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow">
<span class="oo-ui-iconElement-icon oo-ui-icon-imageGallery oo-ui-image-invert"></span>
<span class="oo-ui-labelElement-label">Example button</span>
<span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span>
</a>
</span>
</div>
</div>
</div>
</fieldset>
</div>
</div>
New contributor
佩奇君 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.