I apparently need 10 reputation to post images and just joined to ask this question. I have 3 elements (table, table, div) in the body of my HTML. I set the position to absolute, and with javascript when the body loads, I set the top,left,width,height.
When I inspect the elements in chrome, yes, the styles on the elements are indeed there, and the width and height are accurate in the page itself. But my multiple elements with Top 0 are one below the other instead of both at the top of the page. I just looked it up, and WC3 says that Top is relative to the nearest Ancestor. Ancestor should be the Body for my three elements, correct? In which case the two with top=0 should be at the top instead of 1 below the other. The elements are not within each other. It is a table, then another table, then a div, ~all in the body.
If not, how do I place one table on the top left and the other on the top right?
<body position="relative" onload="BoRayMaa();">
<button id="refresh" onclick="Refresh();">Refresh</button>
<script src="market.js"></script>
<table id="AskTable" position="absolute">
<caption>AskTable</caption>
<tr>
<th style="color:rgb(255, 255, 121)">Price</th>
<th style="color:rgb(255, 255, 124)">Amount</th>
</tr>
</table>
<table id="BidTable" position="absolute">
<caption>BidTable</caption>
<tr>
<th style="color:rgb(255, 255, 121)">Price</th>
<th style="color:rgb(255, 255, 124)">Amount</th>
</tr>
</table>
<div id="Datas" position="absolute">
<p id="bids"></p>
<p id="asks"></p>
<header>This is apparently the Tradeable Balance</header>
<form>
Currency: <input type="text" id="Currency" value="AMfX1zzPwEbxfMbY38XfbiyFFtq7ft7bk4MSNtcjjAvT"></input>
CurrencyOther: <input type="text" id="CurrencyOther" value="WAVES"></input>
PersonAccountAddress: <input type= "text" id="PersonAccountAddress"></input>
</form>
Tradeable Balance: <p id="tradeableBalance"></p>
</div>
</body>
function BoRayMaa() {
KorTo(document.getElementById("BidTable"),0,0,1/4,1/2);
KorTo(document.getElementById("AskTable"),3/4,1/2,1/4,1/2);
KorTo(document.getElementById("Datas"),1/4,0,2/4,1/4);
GetNowOrders(document.getElementById("Currency").value, document.getElementById("CurrencyOther").value);
setInterval(MarketSynth,90);
}
function KorTo(item,mx,my,mw,mh){
item.style.left = window.innerWidth*mx+"px";
console.log(window.innerWidth*mx+"px");
item.style.top = window.innerHeight*my+"px";
item.style.width = window.innerWidth*mw+"px";
item.style.height = window.innerHeight*mh+"px";
}
position is not a html attribute. You should put it inside a style attribute, as you did it with the color (css) property.
Note that position is also a css property, that's why you need the style attribute.