Hi,
We are developing some custom solutions within CK Editor and I'm facing a strange problem.
I try to insert a <span> container with position relative and inside this container 2 overlapped images with position absolute. For some reason the entire span container will be placed "above" any text...Looks like the absolute position is not taking in consideration the first relative positioned parent element.
Here is the HTML source for the editor:
<p>
some text and <span style="position: relative; width: 50px; background: white; height: 50px"><img alt="mask" editorname="ctl00_m_g_e3738b83_2636_424b_951c_4526f924ad86_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01" fromsession="true" height="50" id="molImg_4f09c0dd-fee1-4294-ae5a-4041c8ea7226" molid="4f09c0dd-fee1-4294-ae5a-4041c8ea7226" src="/IMAGES/mask.gif" style="z-index: 100; position: absolute; filter: alpha(opacity=0); top: 0px; left: 0px" width="50" /><img height="50" src="data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAgxJREFUaEPtWKGOwkAQ5b6BYGpAEhQJBkFCJRKJrARHqtCYSiSKICsrkUgkElxlZSVyuLfJXghX7nbobkOaGT27O++9mcnOfNG3NepgAFIHa9QBhMoqAfJhDIgiHyaI1MinCVKNInmeOwfuvNg3mw01m00aDAZ0Op2cAXIG5HA4ULfbpeVySVAEIIbDIc1mM8qyzDog60DSNKXpdEqTyYQul8uvgOM4pk6nQ1EU0e12swbIGhCwvlqtlApJkvwZIACY+poitQIELAMAl2Wtnu/7dD6fTWMu9CsFxFbeH49H6vf7NJ/P366ft4CgWIMgUMVrsxNtt1ulLDod19hArtcrtVot2u/33LeM/FFri8WCer2ekb92YgNBGiCnXRpqB52NYwKEwxbXVxThMCY1wmBLUotBFklqMdiS1GKQJanFIUtSi8OWnh04Z7i++GF7nsc6xv404ps9Ho/VD7jsVFcUKabNdrtNYRi6BaJv18roLQnr1QLnstMmW5HnGDDNYXZ4Z6rDXbamzdJAEAzSDcpgTMU+y8SwScGyAmdsTJtWgOjAscfCPgt7LbTQV4Z1EQBgJWRrnWoViA78VaBoDmgS/wE1UfTZxwkQPPKYOrvdTqUeVj5oEi7MGRAdLIp5NBrRer12Ef/Pnc6BOI3+4XIBUhXTpu+IIqZMVeUnilTFtOk7oogpU1X51UaRO331OY6uFRqbAAAAAElFTkSuQmCC" style="z-index: 1; position: absolute; top: 0px; left: 0px" width="50" /></span> image</p>
<p>
another text another text here</p>
We are developing some custom solutions within CK Editor and I'm facing a strange problem.
I try to insert a <span> container with position relative and inside this container 2 overlapped images with position absolute. For some reason the entire span container will be placed "above" any text...Looks like the absolute position is not taking in consideration the first relative positioned parent element.
Here is the HTML source for the editor:
<p>
some text and <span style="position: relative; width: 50px; background: white; height: 50px"><img alt="mask" editorname="ctl00_m_g_e3738b83_2636_424b_951c_4526f924ad86_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01" fromsession="true" height="50" id="molImg_4f09c0dd-fee1-4294-ae5a-4041c8ea7226" molid="4f09c0dd-fee1-4294-ae5a-4041c8ea7226" src="/IMAGES/mask.gif" style="z-index: 100; position: absolute; filter: alpha(opacity=0); top: 0px; left: 0px" width="50" /><img height="50" src="data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAgxJREFUaEPtWKGOwkAQ5b6BYGpAEhQJBkFCJRKJrARHqtCYSiSKICsrkUgkElxlZSVyuLfJXghX7nbobkOaGT27O++9mcnOfNG3NepgAFIHa9QBhMoqAfJhDIgiHyaI1MinCVKNInmeOwfuvNg3mw01m00aDAZ0Op2cAXIG5HA4ULfbpeVySVAEIIbDIc1mM8qyzDog60DSNKXpdEqTyYQul8uvgOM4pk6nQ1EU0e12swbIGhCwvlqtlApJkvwZIACY+poitQIELAMAl2Wtnu/7dD6fTWMu9CsFxFbeH49H6vf7NJ/P366ft4CgWIMgUMVrsxNtt1ulLDod19hArtcrtVot2u/33LeM/FFri8WCer2ekb92YgNBGiCnXRpqB52NYwKEwxbXVxThMCY1wmBLUotBFklqMdiS1GKQJanFIUtSi8OWnh04Z7i++GF7nsc6xv404ps9Ho/VD7jsVFcUKabNdrtNYRi6BaJv18roLQnr1QLnstMmW5HnGDDNYXZ4Z6rDXbamzdJAEAzSDcpgTMU+y8SwScGyAmdsTJtWgOjAscfCPgt7LbTQV4Z1EQBgJWRrnWoViA78VaBoDmgS/wE1UfTZxwkQPPKYOrvdTqUeVj5oEi7MGRAdLIp5NBrRer12Ef/Pnc6BOI3+4XIBUhXTpu+IIqZMVeUnilTFtOk7oogpU1X51UaRO331OY6uFRqbAAAAAElFTkSuQmCC" style="z-index: 1; position: absolute; top: 0px; left: 0px" width="50" /></span> image</p>
<p>
another text another text here</p>
Re: Position absolute problem.
Re: Position absolute problem.
My span needs to have in style "display: inline-block" because the HTML in iframe is XHTML strict and the span can't have width in normal conditions because it's implicit style is inline. However it can be expanded by a child element, but the child element must NOT have position: absolute in order to expand the parent span.
So 2 options:
1. Add for span display: inline-block.
2. Put a child element inside the span without position: absolute which will force the parent container (span) to expand itself.
Re: Position absolute problem.