It's all to do with stacking order, as Matt noted. Stacking order is just the "z-coordinate" for widgets in your app — you can think of it as if in addition to the natural x and y coordinates you have on the screen, there is another axis that is perpendicular to the plane of the screen. All the widgets lay somewhere along this axis. The image you actually see on screen is the result of "flattening" all the widgets together along that axis. Anywhere that widgets overlap in the x and y plane, the widget that is higher in the stacking order is what you see at that location.
The default stacking order of widgets in Tk is determined by their creation order. The earlier the widget it created, the lower it is in the stacking order — think of the screen itself being at z-coordinate zero, with increasing values coming towards you from the screen. The first widget created has stacking order zero, the second has one, etc.
The easiest solution to your problem is just to create the widgets in the right order, but
if you are dead set on creating the widgets in the order you've shown, you can manually change the stacking order later, to ensure the widgets are stacked in the order you want. For example, to bring your blue frame to the top again, you could add:
raise .top .root
This tells Tk to change the stacking order of .top so that it is "above" .root.
When I use the paned window widget, I tend to have it manage child widgets — to me, it is conceptually just a frame with extra behaviors, and since I use frames to group related widgets together, I use the paned window the same way. This policy also neatly sidesteps the question of stacking order since it requires that you have created the paned window first — you must, because you can't create children of a widget until the widget itself is created. Thus I would modify your example like this:
panedwindow .root -orient vertical -showhandle true -background red
frame .root.top -background blue -width 100 -height 100
frame .root.bot -background green -width 100 -height 100
.root add .root.top .root.bot
To me, this makes the relationship between .root and .root.top and .root.bot clear: the two frame are "inside" the paned window. The natural stacking order happens to be the correct one, and everybody is happy.
